The Plugin Pipeline: Parse, Transform, Generate

PostCSS vs. a Preprocessor

Sass is a fixed LANGUAGE with a built-in feature set (variables, nesting, mixins). PostCSS is a general-purpose TRANSFORMATION TOOL with no fixed feature set of its own — its actual capability comes entirely from configured plugins. It parses CSS into an AST, lets plugins read/write that tree, then generates new CSS — the same parse→transform→generate pattern Babel uses for JS.

Basic Config

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),        // inline @import at build time
    require('tailwindcss'),           // must run before autoprefixer
    require('postcss-preset-env')({ stage: 1 }),
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' }),  // minify, usually last
  ],
};

Order matters: plugins run sequentially, each seeing the previous plugin's output. Tailwind should run before Autoprefixer, so Autoprefixer sees final generated utility classes rather than an unprocessed @tailwind directive.

Autoprefixer & browserslist

// package.json
{ "browserslist": ["> 0.5%", "last 2 versions", "not dead"] }

Autoprefixer and postcss-preset-env read the shared browserslist config to decide exactly which prefixes/transforms are needed for target browsers — the same config often shared with Babel and ESLint elsewhere in the toolchain.