PostCSS Plugins Compatibility with Tailwind CSS v4

[Nobody9512]

I recently upgraded from Tailwind CSS v3 to v4 and encountered an issue with my PostCSS configuration. Previously, my PostCSS config contained additional plugins, and after upgrading, some of my styles stopped working when I removed them.

This was my previous postcss.config.js file:

module.exports = {
    plugins: [
        require("postcss-import"),
        require("postcss-advanced-variables"),
        require("tailwindcss/nesting"),
        require("tailwindcss")("./tailwind.config.js"),
        require("autoprefixer"),
    ],
};

Issue:

• After upgrading to Tailwind CSS v4, I tried removing some of these plugins, but certain styles are no longer applied correctly.
• I am unsure how to properly configure these plugins with Tailwind v4 or whether they are still necessary.

Questions:

1. Are postcss-import and postcss-advanced-variables still needed with Tailwind CSS v4?
2. Does Tailwind v4 handle nesting differently than before? Should I keep tailwindcss/nesting?
3. What is the recommended PostCSS configuration for Tailwind CSS v4 when additional PostCSS plugins are required?

Steps to Reproduce:

1. Use the above PostCSS config with Tailwind CSS v3 (works as expected).
2. Upgrade to Tailwind CSS v4.
3. Remove some plugins (e.g., postcss-import, postcss-advanced-variables).
4. Observe that some styles no longer work as expected.

Any guidance on the correct PostCSS configuration for Tailwind CSS v4 would be greatly appreciated. Thanks in advance!