A tool for transforming CSS with JavaScript plugins. PostCSS itself does nothing — its power is the ecosystem: Autoprefixer adds vendor prefixes, others enable nesting, future syntax and minification, all in one pass.
PostCSS parses your CSS into an abstract syntax tree, runs it through a chain of plugins, and prints it back out. The same CSS can flow through many transforms in a single build step.
Edit the CSS on the left. The output on the right is recomputed live, with newly-added lines highlighted. Toggle the plugins to see each transform's contribution.
Autoprefixer reads a browser-support list and inserts the vendor prefixes those browsers need — so you write the standard property once and never hand-maintain -webkit- noise. Load the example, make sure "autoprefixer" is ticked, and watch the prefixes appear above each property.
The postcss-nesting plugin lets you nest selectors (like Sass) and flattens them to standard CSS at build time — one of the most popular reasons teams add PostCSS. Load this and watch the nested & a and &:hover rules unwrap into flat selectors.
Sass is a fixed language. PostCSS is a platform: you pick only the plugins you want, and you can adopt tomorrow's CSS today (custom media, color functions) and have it down-compiled for current browsers. Tailwind, Autoprefixer and many design systems all run on PostCSS under the hood.
// postcss.config.js — a real config
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nesting'),
require('autoprefixer'),
require('cssnano') // only in production
]
};