My tailwind.config.js file looks like
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./pages/**/*.tsx', './core/**/*.tsx', './components/**/*.tsx'],
theme: {
extend: {},
},
variant: {},
plugins: [],
};
post.css
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
If the w-4 utility-class is applied to a div
<div className="w-4">...</div>
I can find the definition in the global.css file. If I change to any other value (e.g. w-8), there is no effect - w-8 doesn't appear in global.css.
The application is a TS / Next.js application.
VC code shows me a tooltip:
.w-8 {
width: 2rem/* 32px */;
}
package.json
"next-fonts": "^1.5.1",
"postcss": "^8.4.18",
"prettier": "^2.3.0",
"tailwindcss": "^3.2.1",
"ts-jest": "^26.5.6",
"typescript": "^4.2.4"
Still have styled-components in the app - migrating to TWCss.
Related
I have created a website that works well on local hosts but in vercel deployment output.css is empty.
here is code of package json
{
"devDependencies": {
"tailwindcss": "^3.1.8"
},
"scripts":{
"build":"npx tailwindcss -i ./src/input.css -o ./dist/output.css "
},
"dependencies": {
"animate.css": "^4.1.1",
"postcss": "^8.4.16",
"postcss-cli": "^10.0.0"
}
}
here is tailwing.config
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}","./public/*.html"],
theme: {
extend: {},
},
plugins: [],
}
please help
tw-imports.css
#tailwind base;
#tailwind components;
#tailwind utilities;
tailwind.config.js
const { createGlobPatternsForDependencies } = require('#nrwl/angular/tailwind');
const { join } = require('path');
module.exports = {
mode: 'jit',
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
darkMode: 'media',
theme: {
extend: {},
},
plugins: [],
};
postcsss.config.js
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'postcss-flexbugs-fixes',
'postcss-nested',
'postcss-custom-properties',
'autoprefixer',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': true,
'nesting-rules': true,
},
},
],
],
}
css
.button {
#apply rounded text-slate-500 ring-slate-900/5 shadow p-3 ring-2;
&:hover {
--mainColor: #b3a5c0;
color: var(--mainColor);
}
}
.storybook/main.js
module.exports = {
stories: [],
addons: [
'#storybook/addon-essentials',
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
}
}
}
],
core: {
builder: 'webpack5',
},
// uncomment the property below if you want to apply some webpack config globally
webpackFinal: async (config, { configType }) => {
// Make whatever fine-grained changes you need that should apply to all storybook configs
// Return the altered config
return config;
},
};
result
Here is a postcss.config.js example from my most recent project. I am using tailwindcss/nesting which still wraps postcss-nested as explained here https://tailwindcss.com/docs/using-with-preprocessors#nesting
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
cssnano: {
preset: "default",
autoprefixer: { add: false },
},
},
}
I had a similar problem as you a while back, and package versions were important, so here is my package.json.
"devDependencies": {
"#tailwindcss/line-clamp": "^0.4.0",
"#tailwindcss/typography": "^0.5.2",
"autoprefixer": "^10.2.5",
"cssnano": "^4.1.11",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"postcss-custom-media": "^7.0.8",
"postcss-import": "^14.1.0",
"postcss-nested": "^5.0.5",
"postcss-preset-env": "^6.7.0",
"tailwindcss": "^3.1.2"
}
This is TailwindCSS v3, and it looks like you may be using v2, but hopefully it is still useful.
In my simple React example with SASS I apply some CSS from bootstrap.min.css. If I serve the example in dev mode everything works fine. However when I serve a build made in production mode, the Bootstrap CSS is not getting applied, although bootstrap.min.css is part of the bundle. You can see this effect in Component with and without Bootstrap CSS applied.
My App.js routes to component "SearchPage" containing an "input" and a "button" html element. The Bootstrap CSS in these elements is not being applied in the build.
I have included SearchPage\index.js and SearchPage\index.scss at the bottom of this post. The complete project can be viewed at GitHub at https://github.com/TomJsDev/search-address.
When looking at the build's sourcemaps in Chrome dev tools, I can see that the requested CSS is present inside bootstrap.min.css. When I inspect the style rules for e.g the button, bootstrap.min.css is mentioned several times but the rules for color etc. are just not present.
I spent many hours trying out everything I could find on the internet. Making all sorts of imports at the entry point in index.js and index.html, trying different paths for the imports, reinstalling all needed packages, creating and importing an index.scss with #import '~bootstrap/scss/bootstrap'; inside. Nothing worked.
What am I doing wrong? Are the loaders in webpack.config.prod.js perhaps the issue?
Thanks for the help.
Files
index.html
<html lang="en">
<head>
<title>Search address</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
import { render } from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './components/App' // eslint-disable-line import/no-named-as-default
import 'bootstrap/dist/css/bootstrap.min.css'
// import './index.scss'
render(
<Router>
<App />
</Router>,
document.getElementById('app')
)
package.json
{
"name": "search-address",
"description": "Search address",
"scripts": {
"start": "npm run start:dev",
"start:dev": "webpack serve --config webpack.config.dev.js --port 2121",
"clean:build": "rimraf build && mkdir build",
"prebuild": "npm run clean:build",
"build": "webpack --config webpack.config.prod.js",
"postbuild": "npm run serve:build",
"serve:build": "http-server ./build"
},
"dependencies": {
"bluebird": "^3.7.2",
"bootstrap": "5.1.3",
"classnames": "^2.3.1",
"prop-types": "15.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "7.2.4",
"react-router-dom": "5.2.0",
"sass": "1.51.0"
},
"devDependencies": {
"#babel/core": "7.14.6",
"#testing-library/react": "^12.0.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
"autoprefixer": "10.4.7",
"babel-eslint": "10.1.0",
"babel-loader": "8.2.2",
"babel-preset-react-app": "10.0.0",
"css-loader": "5.2.6",
"cssnano": "5.0.6",
"enzyme": "3.11.0",
"eslint": "7.30.0",
"eslint-loader": "4.0.2",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-react": "7.24.0",
"html-webpack-plugin": "5.3.2",
"http-server": "^14.1.0",
"mini-css-extract-plugin": "2.1.0",
"node-fetch": "^2.6.1",
"npm-run-all": "4.1.5",
"postcss": "^8.3.5",
"postcss-loader": "6.1.1",
"react-test-renderer": "17.0.2",
"sass-loader": "^12.6.0",
"style-loader": "3.0.0",
"webpack": "5.44.0",
"webpack-bundle-analyzer": "4.4.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.7.4"
},
"engines": {
"node": ">=8"
},
"babel": {
"presets": [
"babel-preset-react-app"
]
},
"eslintConfig": {
"root": true,
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"rules": {
"no-debugger": "off",
"no-console": "off",
"no-unused-vars": "warn",
"react/prop-types": "warn",
"react/no-unescaped-entities": [
"error",
{
"forbid": []
}
],
"no-mixed-spaces-and-tabs": [
"warn",
"smart-tabs"
]
},
"settings": {
"react": {
"version": "detect"
}
}
}
}
webpack.config.prod.js
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpackBundleAnalyzer = require('webpack-bundle-analyzer')
process.env.NODE_ENV = 'production'
module.exports = {
mode: 'production',
target: 'web',
devtool: 'source-map',
entry: './src/index',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
stats: 'minimal',
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
plugins: [
new webpackBundleAnalyzer.BundleAnalyzerPlugin({ analyzerMode: 'static' }),
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
favicon: 'src/images/search-address-icon.png',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.(css|scss|less)$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true, modules: true }
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [() => require('autoprefixer'), () => require('cssnano')]
},
sourceMap: true
}
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
type: 'asset/resource'
}
]
}
}
SearchPage/index.js
import React from 'react'
import styles from './index.scss'
import join from 'classnames'
export const SearchPage = () => (
<div className={styles.searchPage}>
<h1>Find address</h1>
<form id='searchComponent' className={styles.searchComponent}>
<input
type='search'
placeholder='Type postal code'
pattern='[a-zA-Z0-9]{6}'
maxLength='6'
className={join('form-control', styles.searchInput)}
></input>
<button type='submit' form='searchComponent' className={'btn btn-primary'}>
Zoeken
</button>
</form>
<p>No address to show.</p>
</div>
)
export default SearchPage
SearchPage/index.scss
.searchComponent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
column-gap: 0.5rem;
width: 100%;
max-width: 21.5rem;
}
.searchContainer {
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}
.searchInput {
padding: 0.375rem 0.5rem !important;
}
.searchPage {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1.5rem;
}
I have set up a project with snowpack for svelte in which I'm trying to use tailwind for styling, but using states like hover or focus results in vs code throwing the error
Semicolon or block is expected
If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocess`, did you add `lang=\"scss\"`/`lang=\"less\"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`?
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.
One code example that is causing the problem is
<style lang="postcss">
button {
#apply py-2 px-6 rounded-lg shadow-md;
}
.hoverable {
#apply hover:opacity-90;
}
</style>
This is the package.json
{
"scripts": {
"start": "run-p routify snp",
"build": "routify -b && routify export && snowpack build",
"test": "web-test-runner \"src/**/*.test.ts\"",
"routify": "routify",
"snp": "snowpack dev"
},
"dependencies": {
"#snowpack/plugin-run-script": "^2.3.0",
"postcss-import": "^14.0.2",
"svelte": "^3.37.0"
},
"devDependencies": {
"#roxi/routify": "^2.18.3",
"#snowpack/plugin-dotenv": "^2.2.0",
"#snowpack/plugin-postcss": "^1.4.3",
"#snowpack/plugin-svelte": "^3.6.1",
"#snowpack/plugin-typescript": "^1.2.1",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"#testing-library/svelte": "^3.0.3",
"#tsconfig/svelte": "^1.0.10",
"#types/chai": "^4.2.17",
"#types/mocha": "^8.2.2",
"#types/snowpack-env": "^2.3.3",
"#web/test-runner": "^0.13.3",
"autoprefixer": "^10.4.0",
"chai": "^4.3.4",
"concurrently": "^6.4.0",
"cross-env": "^7.0.3",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.11",
"postcss-cli": "^9.0.2",
"postcss-load-config": "^3.1.0",
"snowpack": "^3.8.7",
"svelte-preprocess": "^4.7.2",
"tailwindcss": "^2.2.19",
"typescript": "^4.3.4"
},
"routify": {
"extensions": "svelte,html,svx,md",
"dynamicImports": false,
"routifyDir": "src/.routify"
}
}
As you can see, I have installed svelte-preprocess which should be responsible for processing the postcss, as well as the other needed packages. The configuration for the project is as follows:
svelte.config.js
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess({
defaults: {
script: "typescript",
style: "postcss",
},
postcss: true,
}),
};
snowpack.config.js
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: [
"#snowpack/plugin-svelte",
"#snowpack/plugin-dotenv",
"#snowpack/plugin-typescript",
"#snowpack/plugin-postcss",
],
routes: [
/* Enable an SPA Fallback in development: */
{ match: "routes", src: ".*", dest: "/index.html" },
],
optimize: {
/* Example: Bundle your final build: */
// "bundle": true,
},
packageOptions: {
knownEntrypoints: ["#roxi/routify/runtime/buildRoutes"],
},
devOptions: {
/* ... */
},
buildOptions: {
/* ... */
},
};
postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
};
tailind.config.js
const production = process.env.NODE_ENV === "production";
module.exports = {
mode: "jit",
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
purge: { content: ["./src/**/*.svelte"], enabled: production },
darkMode: false, // or 'media' or 'class'
theme: {
extend: {/*...*/},
},
variants: {
extend: {},
},
plugins: [],
};
Do you have any idea if it's a configuration problem or is something related to the editor?
While following the official guide for TailwindCSS with PostCSS I find myself with the error:
#parcel/transformer-postcss: Could not resolve module "tailwindcss/nesting" from "C:\Users\Daniel\source\repos\AFP_Reservas\.postcssrc"
My .postcssrc file looks like this:
{
"modules": false,
"plugins": {
"postcss-import": {},
"tailwindcss/nesting": {},
"tailwindcss": {}
"autoprefixer": {
"grid": true
}
}
}
tailwind.config.js looks like this:
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [
'./Maquetas/home.html'
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
And I have the following dependencies installed:
"devDependencies": {
"#parcel/transformer-sass": "^2.0.0",
"autoprefixer": "^10.4.0",
"parcel": "^2.0.0",
"postcss": "^8.3.11",
"postcss-import": "^14.0.2",
"postcss-nested": "^5.0.6",
"tailwindcss": "^1.9.6"
}
Am I missing something? I tried installing #tailwindcss/nesting, but the nesting module is supposed to be a part of the core tailwindcss module.
Because I'm using Tailwind version 1.9 (to support Internet Explorer due to client needs) I can't use tailwindcss/nesting, according to the 1.9 documentation you have to use postcss-nested.