Generate a PostCSS config with correct plugin order
PostCSS is a pipeline: each plugin transforms the CSS produced by the one before it, so the order of plugins is not cosmetic — it determines whether the build works at all. This builder assembles a postcss.config.js with the plugins in their canonical sequence and outputs the matching install command, so you never debug a mis-ordered pipeline.
How it works
PostCSS reads a plugins object and runs each entry top to bottom. The builder enforces the order that the ecosystem expects: postcss-import first so @import statements are inlined into a single sheet, then tailwindcss/nesting so nested rules are flattened before Tailwind processes them, then tailwindcss (or @tailwindcss/postcss for v4) to expand utility classes, then autoprefixer to add vendor prefixes based on your browserslist, and finally cssnano to minify.
The cssnano step is special: minifying on every dev rebuild is slow and produces unreadable output, so by default the builder gates it behind const isProd = process.env.NODE_ENV === "production" and spreads it into the plugins object only in production. You choose CommonJS (module.exports) or ESM (export default) to match your project’s module type, and the tool emits a npm install -D line listing exactly the packages the chosen plugins require, plus postcss itself.
Tips and notes
If you see un-prefixed CSS in older browsers, confirm a browserslist field exists in package.json — Autoprefixer reads it. Keep postcss-import first or @import resolution will run after other plugins and break. For Tailwind v4, prefer the v4 toggle so you get @tailwindcss/postcss, which bundles nesting and prefixing and lets you drop those separate plugins. After copying, restart the dev server, since the PostCSS config is loaded once when the build starts.