# Introduction to PostCSS

> Learn what PostCSS does, how to run it with the CLI and a configuration file, and how plugins such as Autoprefixer, PostCSS Preset Env, and cssnano work.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-03-06 | Updated: 2026-07-18 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/postcss/

<!-- TOC -->

- [What is PostCSS?](#what-is-postcss)
- [Install PostCSS and its CLI](#install-postcss-and-its-cli)
- [Configure plugins](#configure-plugins)
- [Run PostCSS](#run-postcss)
- [Useful PostCSS plugins](#useful-postcss-plugins)
  - [Autoprefixer](#autoprefixer)
  - [PostCSS Preset Env](#postcss-preset-env)
  - [postcss-import](#postcss-import)
  - [postcss-nested](#postcss-nested)
  - [PostCSS Modules](#postcss-modules)
  - [cssnano](#cssnano)
- [How is PostCSS different from Sass?](#how-is-postcss-different-from-sass)

<!-- /TOC -->

## What is PostCSS?

PostCSS is a tool for transforming CSS with JavaScript plugins.

PostCSS parses a stylesheet into a syntax tree. Plugins inspect or change that tree, and PostCSS writes the result as CSS.

PostCSS itself does not decide which transformations to apply. You choose the plugins for your project.

Common uses include:

- adding vendor prefixes
- converting selected modern CSS features
- resolving imported files
- supporting alternative nesting syntax
- minifying production CSS

Many frameworks and build tools already run PostCSS behind the scenes. Check their documentation before adding another PostCSS step.

The official [PostCSS documentation](https://postcss.org/docs/) describes the core tool and plugin ecosystem.

## Install PostCSS and its CLI

Install PostCSS locally as a development dependency:

```bash
npm install --save-dev postcss postcss-cli
```

Install the plugins you need too. For example:

```bash
npm install --save-dev autoprefixer
```

Local installation keeps the version in your project. You can run the CLI through `npx` or an npm script.

## Configure plugins

Create `postcss.config.js` in the project root:

```js
module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}
```

Plugins run in array order. This matters when one plugin expects the output of another.

For a longer plugin chain, keep every plugin in this configuration file instead of passing them all on the command line.

## Run PostCSS

Process one file and write the result to another file:

```bash
npx postcss src/styles.css --output dist/styles.css
```

You can add `--watch` during development:

```bash
npx postcss src/styles.css --output dist/styles.css --watch
```

See the official [PostCSS CLI reference](https://github.com/postcss/postcss-cli) for globs, directories, source maps, and other options.

## Useful PostCSS plugins

PostCSS is useful because you can build a small pipeline for your needs.

The official [PostCSS plugin directory](https://postcss.org/docs/postcss-plugins) is a good place to start.

### Autoprefixer

[Autoprefixer](https://github.com/postcss/autoprefixer) adds and removes vendor prefixes based on your supported browsers.

It uses Browserslist and Can I Use data. Put your browser targets in a `.browserslistrc` file or the `browserslist` field in `package.json`.

You write standard CSS:

```css
::placeholder {
  color: gray;
}
```

Autoprefixer adds a prefixed form only when your browser targets need it.

### PostCSS Preset Env

[PostCSS Preset Env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env) converts selected modern CSS features according to your browser targets.

It contains Autoprefixer, so you normally do not add Autoprefixer separately when using this preset.

It replaces the deprecated `postcss-cssnext` package.

### postcss-import

[postcss-import](https://github.com/postcss/postcss-import) resolves `@import` rules and combines local stylesheets.

Put it near the start of the plugin chain so later plugins can process the imported CSS.

### postcss-nested

[postcss-nested](https://github.com/postcss/postcss-nested) unwraps a Sass-like nesting syntax.

Native CSS nesting is now available in modern browsers. Use this plugin when its syntax or your browser targets still make it useful.

### PostCSS Modules

[PostCSS Modules](https://github.com/madyankin/postcss-modules) transforms CSS Modules class names and exports their mappings.

CSS Modules are a build-tool convention, not part of the CSS language.

### cssnano

[cssnano](https://cssnano.github.io/cssnano/) optimizes and minifies CSS for production.

Its default preset applies transformations intended to be safe. More aggressive presets can change behavior, so review their options before enabling them.

## How is PostCSS different from Sass?

Sass is a language with a defined set of features such as variables, mixins, and modules. It compiles Sass syntax to CSS.

PostCSS is a toolkit. Its behavior comes from the plugins you configure.

You do not have to choose one or the other. A project can compile Sass first, then run PostCSS for tasks such as prefixing or minification.