I'm trying to run "npm run dev," but it gives me an error in the end.
I'm using Laravel Mix and Tailwind CSS.
Versions
laravel-mix: 6.0.22
tailwind-css: ^2.0.4
#tailwindcss/jit: ^0.1.18,
resources/css/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss("resources/css/app.css", "public/css", [
require('#tailwindcss/jit'),
])
tailwind.config.js
module.exports = {
purge: ['./resources/**/*.{js,vue,blade.php,css}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
}
},
variants: {
extend: {},
},
plugins: [
],
}
ERROR in ./resources/css/app.css Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read
property 'theme' of undefined
at _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)
at /var/www/work/node_modules/#tailwindcss/jit/src/index.js:50:11
at LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/var/www/work/node_modules/postcss/lib/lazy-result.js:391:26)
at async Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87:14)
at processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19)
at /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5
at /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7)
1 ERROR in child compilations (Use 'stats.children: true' resp.
'--stats-children' for more details) webpack compiled with 2 errors
To enable just-in-time mode, set the mode option to 'jit' in your tailwind.config.js file.
tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./resources/**/*.{js,vue,blade.php,css}'],
theme: {
extend: {}
},
variants: {
extend: {},
},
plugins: [],
}
But first, you will need to upgrade your Tailwind and related packages, so run the following.
npm install -D laravel-mix#latest tailwindcss#latest postcss#latest autoprefixer#latest
Also, you'll need to remove the JIT package from your Webpack config and require Tailwind. As of Tailwind CSS v2.1 #tailwindcss/jit has been merged with the core Tailwind CSS repository.
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss("resources/css/app.css", "public/css", [
require('tailwindcss'),
])
Related
im using tailwind in my Nextjs project. i decided to add my own color set to tailwind.config.js. then when i go back to my project i saw some tailwind classes for some elements not working and some of them works like before. the codes that should be in global css are there. #tailwind base; #tailwind components; #tailwind utilities;
and global css imported in layout. it was working fine whole the time. i changed nothing but just i said earlier. maybe its worth to know that im using experimental feature (appDir) in next.config.js.
its now my tailwind.config.js file:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
portcss file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
also has the tailwind in package.json: "tailwindcss": "^3.2.4"
i removed the color set but didnt fixed the problem. i tried npm run dev -- --no-cache
but didnt helped. deleting .next also not worked. even moved the folder but the problem exist. then i deleted all tailwind config files and reinstall them and not everything just messed up. there is no more tailwind classes working now.
Have You tried adding and
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./app/**/*.{js,ts,jsx,tsx}"
]
I installed tailwindcss via scoop and created a new project.
Then i ran via CLI tailwindcss init and edited tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.{html}",
],
theme: {
extend: {},
},
plugins: [],
}
I created input.css:
#tailwind base;
#tailwind components;
#tailwind utilites;
Then created output.css and started the next command:
tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
Every time i edit html.css tailwind css start rebuilding but doens't create the classes i wrote in html file.
How con i solve this?
Thank you
I tried to see some answers here on stackoverflow and but i didn't find any solution to my problem.
I got a problem using tailwind css with Vue3. Looking at the network tab it's size is 4.4 MB.
The postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
cssnano: {}
}
}
tailwind.config.js
module.exports = {
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
prefix: 'tw-',
...
cssnano is added using yarn.
yarn.lock
cssnano-preset-default#^5.2.12:
cssnano#5.1.13
tailwindcss#^2.1.4:
Importing tailwind in main.css which itself is imported in the vue entrypoints.
#tailwind utilities;
#tailwind base;
#tailwind components;
Whether in development nor in production the size of main.css changes.
All right, I solved it. The version of tailwind I'm using ain't compatible with the "content" setting in the current documentation. I still have to use this syntax:
purge: {
enabled: true,
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
},
Also needed to do a re-build of the prod environment.
You have also the mode JIT it will generates your styles on-demande https://v2.tailwindcss.com/docs/just-in-time-mode
When running stylelint the output of warnings does not show the name of the file where the error occurs (with errors it does work fine). My files look like this:
app.scss
#import './_file-with-error';
_file-with-error.scss
html body {
color: red;
}
body { // provocate an error 😈
color: red;
}
I use Webpack Encore and stylelint as a PostCSS plugin, when I build I get:
michael#machine:~$ yarn encore dev
yarn run v1.21.1
$ /var/www/html/mop/mop/node_modules/.bin/encore dev
Running webpack ...
WARNING Compiled with 1 warnings 11:47:14 PM
warning in ./assets/scss/app.scss
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning
(5:1) Expected selector "body" to come before selector "html body" (no-descending-specificity)
Entrypoint app [big] = runtime.js vendors~app.js app.css app.js
Entrypoint home = runtime.js home.js
Entrypoint _tmp_copy = runtime.js
Done in 3.06s.
So everything is fine just that I do not see where the warning comes from, I need the filename and the line. How can I configure that?
Setup
webpack.config.js
Encore.enablePostCssLoader();
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
stylelint: {},
},
};
.stylelintrc.json
{
"extends": "stylelint-config-standard",
"rules": {
"no-duplicate-selectors": null
}
}
You need to add a reporter to your PostCSS pipeline:
The stylelint plugin registers warnings via PostCSS. Therefore, you'll want to use it with a PostCSS runner that prints warnings or another PostCSS plugin whose purpose is to format and print warnings (e.g. postcss-reporter).
For example:
module.exports = {
plugins: {
autoprefixer: {},
stylelint: {},
'postcss-reporter': { clearReportedMessages: true }
},
}
Alternatively, you can use the official webpack plugin for stylelint.
How to make Tailwind css work in a nrwl/nx Next js project?
Now I am using the common approach but it failed:
[ error ] ./styles/main.css
Error: Didn't get a result from child compiler
the common approach I took:
npx create-nx-workspace#latest my-org
yarn add --dev #nrwl/next
nx g #nrwl/next:application my-project
yarn add tailwindcss autoprefixer postcss-loader #zeit/next-css
cd apps/my-project
create
postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
};
create
next.config.js
const withCSS = require('#zeit/next-css');
module.exports = withCSS({});
create
styles/main.css
#tailwind base;
#tailwind components;
#tailwind utilities;
create a default _app.js in pages
add import '../styles/main.css' in _app.js
I have solved the problem.
Here is how I added tailwind in next.js project
install tailwind and autoprefixer in the workspace
create tailwind.config.js and tailwind.css.
import tailwind.css at _app.tsx
create next.config.js
const path = require('path');
module.exports = {
webpack: config => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('tailwindcss')(
path.resolve(__dirname, 'tailwind.config.js') // the absolute path of your tailwind.config.js
),
require('autoprefixer')
]
}
}
],
// the absolute path of the folder contains tailwind.css
// I reuse tailwind.css across projects and libs so I put it in the workspace root
// Maybe I should create a lib for it.
include: path.resolve('./global')
});
return config;
}
};
It is similar if you wanna integrate Tailwind with lib's storybook or in projects of other framework. Just find the way to push rules to webpack config.
Hope it helps.
If you use new version - 9.2 then you need this article:
https://nextjs.org/blog/next-9-2
And updated setup example for Next.js 9.2:
https://github.com/tailwindcss/setup-examples/pull/50
I tried it, it good works for me.