Why any postcss nesting plugins doesn't work? - reactjs

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