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

Answer 1

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