Loading page
About this tool
Generate a postcss.config file with import, nesting, preset-env, autoprefixer and cssnano plugins in the correct order.
This generator produces a ready-to-use PostCSS configuration file — postcss.config.mjs, postcss.config.js or .postcssrc.json — in the object-plugin syntax read by postcss-load-config, the loader used by Next.js, Vite and the PostCSS CLI. It orders postcss-import, nesting, postcss-preset-env, autoprefixer and cssnano correctly for the pipeline, and can gate minification behind NODE_ENV === "production" so development builds stay readable.
Open PostCSS Config Generator on AltFTool — it loads instantly in your browser.
Paste your code or data sample into the workspace.
Pick the format, conversion, or analysis you need.
Copy the polished result straight back into your project.
Emits imports first, nesting before prefixing and cssnano last — the order the plugin authors themselves document.
Flags that postcss-preset-env already includes autoprefixer and nesting-rules, so you do not run the same transform twice.
ESM, CommonJS or JSON, plus the exact npm install command for the plugins you selected.
Yes — PostCSS runs plugins strictly top to bottom, each receiving the previous plugin's output. postcss-import must run first so later plugins see the inlined files, nesting must be flattened before autoprefixer processes selectors, and cssnano's documentation says to run it last on the final CSS.
postcss-nesting implements the W3C CSS Nesting specification — the same syntax browsers now ship natively — while postcss-nested implements Sass-style nesting, which is more permissive about bare selectors. If you want code that can eventually run unprocessed in browsers, choose postcss-nesting.
No — postcss-preset-env runs autoprefixer internally, so listing both prefixes the same properties twice for no benefit. Use autoprefixer alone if vendor prefixes are all you need, or preset-env alone if you also want future CSS features transpiled by stage (its default is stage 2).
Use a JavaScript config (postcss.config.mjs or .js) and spread cssnano into the plugins object only when process.env.NODE_ENV === "production", which is exactly what this generator emits. A JSON config cannot branch on environment variables, so JSON output includes cssnano unconditionally.