Why any postcss nesting plugins doesn't work?

Question

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

My postcss.config.js file:

  plugins: [
    "postcss-import",
    "tailwindcss/nesting",
    "tailwindcss",
    "autoprefixer",
  ],
};

I tried to write it down like this:

  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

and like this:

  plugins: [
    require("postcss-import"),
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

Github repo with this project: https://github.com/frkam/test-app

When I try to use nesting, i get this:enter image description here

Are you using Create React App, version 5? There are some known issues with PostCSS support, which is now included along with Tailwind, and CRA 5 does not allow overrides using postcss.config.js. See: github.com/facebook/create-react-app/pull/… — Ed Lucas
– Ed Lucas, Commented Jan 31, 2022 at 16:23
@EdLucas yes, i use CRA5. As I understand it, the solution to this problem may be to roll back to a previous version or use a different preprocessor. Thanks. — Frkam mm
– Frkam mm, Commented Jan 31, 2022 at 17:37
There's an open PR to fix this, which will hopefully be implemented. You can follow the issue here: github.com/tailwindlabs/tailwindcss/discussions/7049 — Ed Lucas
– Ed Lucas, Commented Feb 5, 2022 at 17:48

Konstantin · Accepted Answer · 2022-07-16 05:39:56Z

3

As Ed Lucas mentioned above CRA5 does not allow to override postcss.config But at the moment you can use something like craco

An Example you can find in Felipe Zavan comment

This works for me. So I hope it will be helpful :)

My craco.config

module.exports = {
  style: {
    postcss: {
      loaderOptions: (postcssLoaderOptions) => {
        postcssLoaderOptions.postcssOptions.plugins = [
          require('tailwindcss/nesting'),
          require('tailwindcss'),
          require('postcss-mixins'),
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 0,
            },
          ],
        ]

        return postcssLoaderOptions
      },
    },
  },
}

edited Jul 16, 2022 at 5:39

answered Jun 10, 2022 at 11:53

Konstantin

3014 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why any postcss nesting plugins doesn't work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related