What is PostCSS and how to configure it

· Category: HTML & CSS

Short answer

PostCSS is a tool for transforming CSS with JavaScript plugins. It can autoprefix, polyfill features, optimize, and lint your styles.

How it works

You define a PostCSS config with plugins. As your CSS is processed, each plugin transforms the AST. Common plugins include Autoprefixer, postcss-preset-env, and cssnano.

Example

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested'),
    require('cssnano'),
  ],
};

Why it matters

PostCSS lets you use tomorrow's CSS today, ensures cross-browser compatibility, and shrinks production stylesheets automatically.

Tips

  • Pair with browserslist to target specific browser versions.
  • Use postcss-import to inline @import statements.
  • Many frameworks like Next.js and Vite include PostCSS by default.