CSS nesting has not been configured correctly error after upgrade TailwindCSS version 1 to 3

Question

I am getting following error after upgrade tailwindcss from V1 to V3 although I have added @tailwindcss/nesting and postcss-nesting

My postcss.config.js has tailwind config

module.exports = {
    plugins: {
        tailwindcss: {
            config: './tailwind.config.js'
        }
    }
};

and tailwind.config.js has

plugins: [
    require('tailwindcss-rtl'),
    require('autoprefixer'),
    require('@tailwindcss/nesting')(require('postcss-nesting')),
]

Not sure why nesting plugin not working am I missing anything I am using Vue 3.

Answer 1

Why not follow the guide, the error point to?

Import the nesting plugin in postcss.config.js, not in tailwind.config.js.

https://tailwindcss.com/docs/using-with-preprocessors#nesting