Cannot fix the warning: Nested CSS was detected, but CSS nesting has not been configured correctly

[wuarmin]

Hey,

I get the warning Nested CSS was detected, but CSS nesting has not been configured correctly, because of following css:

@layer components {
  .fast-table {
    .cell {
      padding: 0.5rem;
      /* border-bottom: 1px solid var(--table-border-color); */
    }
  }
}

I tried to add the nesting feature, as described at the docs, with following postcss.config...

module.exports = {
  plugins: [
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

...but without success. Does anybody know what I'm doing wrong?

Thanks!

[leguian]

Hello !
Exactly the same problem here:

Error

158:5   !!  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 [undefined]

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('autoprefixer'),
    require('tailwindcss'),
  ]
}

[asadullakkh]

thank you, it works for me.

[webshakil]

module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting')(require('postcss-nesting')),
require('autoprefixer'),
require('tailwindcss'),
]
}

It worked for me.

[ZhangWillYu]

Thank you!!

[adamwathan]

Please provide a full reproduction, my first guess is maybe you are using Tailwind CLI and are not including the --postcss flag so it's ignoring your postcss.config.js file but can't know if that's the case without a complete reproduction.

[adamwathan]

Gotcha! So the problem is CRA totally ignores your postcss.config.js file. I’ve tried to convince the maintainers this is the wrong choice and frustrating for users but so far they aren’t budging unfortunately :(

If you can I would recommend using a different tool, like Vite which does everything CRA does, but is much faster and supports custom PostCSS configurations.

[adamwathan]

Here’s the relevant issue on the CRA repo: facebook/create-react-app#11926 (comment)

[jenstornell]

@wuarmin Vite is a super fast tool that works with React. https://vitejs.dev/. By the way, I used Yarn before but NPM has improved quite a lot so I no longer see a reason to use Yarn. Also, Yarn is just a layer on top of NPM anyway, but that's just a preference I guess.
@adamwathan Maybe add somethings in the docs about it. Else people may put the blame on Tailwind which would not be fair.

[wuarmin]

@jenstornell and @adamwathan Thank you for your tips and the clarification. I've already read about vite. I'll try it out in the future and probably decommission create-react-app. Still, it would be good if we can pull through with the PR because I think the majority is still on create-react-app.

[JeffersonLDR]

@adamwathan. THANKS! I'm happy with the solution found. I was just missing the "--postcss" in the CLI command.
I searched the Tailwind documentation and found no reference to this --postcss.
Maybe this is the cause of the problem, a lot of people build with the CLI but don't put --postcss.
If you can update the site it would be of great help! Hug!

[chambahr]

Did you finally get a working solution for this? I have same issues and can't find a possible solution now for 2 days.

[wuarmin]

If you using create-react-app, you could move to Vite.

[miguelgargallo]

How did you relate this tailwind error with Vue, on a NextJS project?

[wuarmin]

You can use vite for a react app. I did not know that the user has a NextJS project.

[isimmons]

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

.postCss('resources/css/app.css', 'public/css', [
    // prettier-ignore
    cssImport(),
    cssNesting(),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
  ])

[aricma]

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)

[yt94dev]

Solution on stackoverflow worked for me

[robacarp]

7:5	⚠  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 [undefined]

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:

• change this message to something which is less descriptive about what the problem could be, therefore letting the developer do the detective work? (ie, remove "but CSS nesting has not been configured correctly")
• or perhaps mention the possibility that if it's configured correctly that this situation represents a syntax error?
• include the code/rules that tripped the message?

[robacarp]

Here is a reproducible sample project which fails regardless of the configuration of 'tailwind/nesting' because it contains syntax which doesn't get fully un-nested for one reason or another.

https://gist.github.com/robacarp/222e8a4d9bc0c8d82fa79dd051761187

$ git clone git@gist.github.com:222e8a4d9bc0c8d82fa79dd051761187.git tailwindnesting
$ cd tailwindnesting
$ yarn install
$ ./run

19:7	⚠  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 [undefined]

[bcorcoran]

Using vite, it appears postcss-nesting isn't supported, or at least doesn't work properly?

The warning is displayed if you attempt to use 'tailwindcss-nesting': 'postcss-nesting' but goes away if you just use the default with 'tailwindcss-nesting': {}

[lucho20pt]

Well i came here with the same problem in my next.js project
and figure it out the solution that was changing the order in postconfig.js

package.json
"devDependencies": { "autoprefixer": "^10.4.10", "eslint": "8.23.1", "eslint-config-next": "12.3.0", "postcss-cli": "^10.0.0", "tailwindcss": "^3.1.8" }

postconfig.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-import': {},
    'tailwindcss/nesting': {}
  }
}

And the Solution is in the error console message:

Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin before Tailwind in your configuration.

Solution in postconfig.js: (Just don't forget to restart the compiler)

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {}
  }
}

Working example in globals.css

.btn {
    @apply font-bold py-2 px-4 rounded;
    &-primary {
        @apply bg-primary text-white;
        &:hover {
            @apply bg-primary/50;
          }
      }
  }

[nv-cho]

thanks! this answer worked perfect!

[deepanchal]

Changing the order also fixed the issue for me:

diff --git a/postcss.config.cjs b/postcss.config.cjs
index efa8f96..e569373 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,8 +1,8 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     'postcss-import': {},
     'tailwindcss/nesting': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 };

[N30]

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:

//Tailwind.config.js

    plugins: [
        require('@tailwindcss/forms'),
        require("tailwindcss/nesting")
    ],

//postcss.config.js
module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {}
    },
};

[minemindmedia]

This helped me, thank you so much!

[zsf1482451437]

thanks!

[planner1990]

I had this type of problem and I fixed it by adding this code:

I added these lines on nuxt.config.ts:

    build: {
    postcss: {
        postcssOptions: {
            plugins: {
                "postcss-import": {},
                "postcss-preset-env": {},
                "tailwindcss/nesting": {},
                tailwindcss: {},
                autoprefixer: {},
                ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
            },
        },
    },
},

[uejosh]

Thank you! This worked for me in my nuxt.js project. The interesting thing is that I had tried this without success like this:

build: {
    postcss: {
      plugins: {
        "postcss-import": {},
        "postcss-preset-env": {},
        "tailwindcss/nesting": {},
        tailwindcss: {},
        autoprefixer: {},
      },
   },
  },

[uejosh]

But after I saw your solution, I nested the plugins object in postcssOptions like you did and it worked:

build: {
    postcss: {
      postcssOptions: {
        plugins: {
          "postcss-import": {},
          "postcss-preset-env": {},
          "tailwindcss/nesting": {},
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },

[Nikkelmann]

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')
];

[bcorcoran]

Syntactically there seems to be nothing wrong with the first example, though?

[fitoe]

worked for me https://github.com/withastro/astro/issues/6202

[duyn-stanford]

I am using Laravel Mix and updated postcss.config.js to include the tailwind/nesting plugin before tailwindcss:

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    },
};

This reduces my "Nested CSS" warnings down from 45 to 4:

WARNING in ./node_modules/@ckeditor/ckeditor5-image/theme/textalternativeform.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-23.use[0]!./node_modules/@ckeditor/ckeditor5-image/theme/textalternativeform.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(24:3) 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

WARNING in ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-23.use[0]!./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(24:3) 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

WARNING in ./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-23.use[0]!./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(18:3) 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

WARNING in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-23.use[0]!./node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(27:4) 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

Anyone else come across this issue?

[hsiaomingcheng]

any solution?

[alfisdad]

I'm seeing exactly the same thing. Did you manage to find a solution?

[cgtysafak]

This worked for me: https://tailwindcss.com/docs/using-with-preprocessors#nesting

[Aleixis]

change the css file to scss file

[stefnotch]

Native CSS nesting is in the latest TailwindCSS release, see #13317

[gizmostudios]

What worked for me (using Astro and Vite) was using the mjs extension (module jS).
So the config file in the root is called postcss.config.mjs.
Then the following syntax:

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  },
};

[stefnotch]

The latest TailwindCSS release has native CSS nesting support. Which means if you're targeting modern browsers only, you can leave out the 'tailwindcss/nesting': 'postcss-nesting', line

[adamwathan]

You still need our nesting plugin if you are using @apply to apply custom CSS that contains nesting, but otherwise you're right, should be good.

And in v4 native nesting is fully supported 👍

[Sergi0Martin]

Same problem with Astro and tailwind.
I tried to follow oficial documentation but i didn't works. (https://tailwindcss.com/docs/using-with-preprocessors#nesting)

[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 |          }