PostCSS Config Generator

Setting up PostCSS for your project? Our free PostCSS Config Generator writes your postcss.config.js in seconds — tick the plugins you need, pick your cssnano preset, then copy the ready-to-use file.

PostCSS Config Generator

autoprefixer — add vendor prefixes postcss-nested — nested rules postcss-preset-env — modern CSS features tailwindcss css-declaration-sorter — sort declarations cssnano — minify for production cssnano preset:

postcss.config.js

How to Use

Tick the PostCSS plugins your project needs.
Choose a cssnano preset if you enabled minification.
The config updates live — click Copy Config and save it as postcss.config.js.
Install the plugins you selected with npm.

Key Features

Generates a ready-to-use postcss.config.js.
Covers autoprefixer, postcss-nested, postcss-preset-env, tailwindcss, css-declaration-sorter and cssnano.
cssnano preset picker for production builds.
Updates live as you change options, with one-click copy.
Runs entirely in your browser — free with no sign-up.

FAQs

What is PostCSS?

PostCSS is a tool for transforming CSS with JavaScript plugins. It powers autoprefixing, future CSS syntax, minification and much more.

Where do I put the config file?

Save it as postcss.config.js in your project root. Build tools such as webpack, Vite and Parcel pick it up automatically.

Do I need to install the plugins?

Yes. Install each plugin you ticked as a dev dependency, for example npm install -D autoprefixer cssnano, then reference them in the config.

Do I need an account to use this tool?

No. Like every tool on ToolsFreeHub, the PostCSS Config Generator is free and works without signing up.