Replies: 18 comments 25 replies
-
Hello ! Error
postcss.config.js module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('autoprefixer'),
require('tailwindcss'),
]
} |
Beta Was this translation helpful? Give feedback.
-
Please provide a full reproduction, my first guess is maybe you are using Tailwind CLI and are not including the |
Beta Was this translation helpful? Give feedback.
-
Did you finally get a working solution for this? I have same issues and can't find a possible solution now for 2 days. |
Beta Was this translation helpful? Give feedback.
-
Google led me here so dropping this for others. Had same warning in Laravel app after updating all dependencies to latest. In Laravel I had no postcss.config.js file so was confused. Solution is in webpack.mix.js require tailwindcss/nesting before tailwind
|
Beta Was this translation helpful? Give feedback.
-
there is a solution without ejecting CRA. see https://stackoverflow.com/a/72097591/8111715 and also thanks to andrewodri for the inspiration facebook/create-react-app#2133 (comment) |
Beta Was this translation helpful? Give feedback.
-
I tripped on this message a bit because I was using "sass style" nesting but had selected "spec style" nesting, or I had some other invalid configuration that meant the nesting wasn't getting correctly resolved before it was fed to tailwind. The message indicates that I didn't have it configured properly, but my configuration was 100% on par with the documentation sample. Does it make sense to:
|
Beta Was this translation helpful? Give feedback.
-
Using vite, it appears The warning is displayed if you attempt to use |
Beta Was this translation helpful? Give feedback.
-
Well i came here with the same problem in my next.js project package.json postconfig.js
And the Solution is in the error console message: Nested CSS was detected, but CSS nesting has not been configured correctly. Solution in postconfig.js: (Just don't forget to restart the compiler)
Working example in globals.css
|
Beta Was this translation helpful? Give feedback.
-
It definitely acts up, and also you do have to restart npm/vite and whatever compiler you are using, as much as breaing it doesn't take a restart, adding the plugins back does, I got mine to work for now with these two configurations. (People are not mentioning the Tailwind.config.js:
|
Beta Was this translation helpful? Give feedback.
-
I had this type of problem and I fixed it by adding this code: I added these lines on
|
Beta Was this translation helpful? Give feedback.
-
Be aware that this message will also be shown even if the plugins are correctly configured, but there is an actual problem with the nested css. E.g. @media (min-width: 1024px) {
.my-module {
& .some-nested-class {
padding-bottom: 0;
}
#scroll-to-content-anchor {
top: 1rem;
}
}
} should have been @media (min-width: 1024px) {
.my-module {
& .some-nested-class {
padding-bottom: 0;
}
}
#scroll-to-content-anchor {
top: 1rem;
}
} Our config: const postCssPlugins = [
require('postcss-import-ext-glob'),
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('tailwindcss')({ content: ['Views/**/*.cshtml'] }),
require('autoprefixer'),
require('postcss-minify')
]; |
Beta Was this translation helpful? Give feedback.
-
worked for me https://github.com/withastro/astro/issues/6202 |
Beta Was this translation helpful? Give feedback.
-
I am using Laravel Mix and updated postcss.config.js to include the tailwind/nesting plugin before tailwindcss:
This reduces my "Nested CSS" warnings down from 45 to 4:
Anyone else come across this issue? |
Beta Was this translation helpful? Give feedback.
-
This worked for me: https://tailwindcss.com/docs/using-with-preprocessors#nesting |
Beta Was this translation helpful? Give feedback.
-
change the css file to scss file |
Beta Was this translation helpful? Give feedback.
-
Native CSS nesting is in the latest TailwindCSS release, see #13317 |
Beta Was this translation helpful? Give feedback.
-
What worked for me (using Astro and Vite) was using the
|
Beta Was this translation helpful? Give feedback.
-
Same problem with Astro and tailwind. [WARN] [vite] [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
23 |
24 | [data-theme="light"] {
25 | strong {
| ^^^^^^^^
26 | color: rgb(59, 130, 246) !important;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
27 | } |
Beta Was this translation helpful? Give feedback.
-
Hey,
I get the warning
Nested CSS was detected, but CSS nesting has not been configured correctly
, because of following css:I tried to add the nesting feature, as described at the docs, with following postcss.config...
...but without success. Does anybody know what I'm doing wrong?
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions