TailwindCSS nesting not working with postCSS config - nested

Question

I am trying to scope tailwind styles and I am using this postcss config from Tailwind docs:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
and here is my css
.app-wrapper {
#tailwind base;
#tailwind components;
#tailwind utilities;
}
with this config the nesting is working fine but not all the tailwindCSS classes working as expected.
but when I change the config to the following
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
};
the classes works fine but the nesting throw the following error
Nested #tailwind rules were detected, but are not supported.
any idea how I can get the tailwind to work as expected with the nesting enabled?

Answer 1

If you wish to add parent selector for every compiled utility, add important: '.app-wrapper', into your tailwind config and do not wrap #tailwind directives
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
#tailwind base;
#tailwind components;
#tailwind utilities;
// tailwind.config.js
module.exports = {
important: '.app-wrapper',
// ...
};
This called selector strategy. This way text-red-500 utility will be compiled as
.app-wrapper .text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));
}
Please note: if you set darkMode as class strategy in your config
module.exports = {
darkMode: 'class',
important: '.app-wrapper',
// ...
};
utility dark:text-white (and every other dark utility) will be compiled as
.app-wrapper .dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
So if both dark and app-wrapper classes will be placed on the SAME element (e.g. html or body) dark mode would not work. That may explain why some classes are not working when using nesting