PostCSS, Sass or Lightning CSS
All three tools process CSS before publishing, but they do different jobs. Sass is a language on top of CSS. PostCSS is a plugin pipeline. Lightning CSS is a ready-made fast processor without plugins. They are often used together, so it helps to know where the line runs.
Comparison
| Sass | PostCSS | Lightning CSS | |
|---|---|---|---|
| What it is | A language that compiles to CSS | A parser and JavaScript plugins | A ready-made program in Rust |
| Input files | .scss, .sass | Plain .css | Plain .css |
| Mixins, functions, loops | Yes | Only through plugins | No |
| Prefixes from Browserslist | No | Autoprefixer | Built in |
| New CSS for older browsers | No | postcss-preset-env | Built in, some features |
| Minification | Basic | cssnano | Built in |
| Custom plugins | No | Yes, in JavaScript | Limited |
| Speed | High | Depends on plugins | Very high |
How they combine
Sass and PostCSS are not rivals. A typical chain: Sass builds styles from modules and mixins, and PostCSS adds prefixes and minifies. In Vite this happens by itself: a .scss file is compiled by Sass first, and the result goes through postcss.config.js.
styles/main.scss → Sass → CSS → PostCSS (preset-env) → css/main.cssLightning CSS usually works out of sight: Vite 8 minifies CSS with it on build, and Tailwind CSS 4 processes its output with it. You pick it on its own when you need maximum speed and its built-in feature set is enough.
What to choose
| Situation | Choice |
|---|---|
| A Vite project with plain CSS | Vite alone is enough; add postcss-preset-env if you need @custom-media or a wide browser list |
| A site without a bundler that must support older browsers | postcss-cli with postcss-import, postcss-preset-env and cssnano |
| A large style system with mixins and calculations | Sass, followed by PostCSS or Vite |
| A Tailwind CSS 4 project | Tailwind handles prefixes and imports itself; PostCSS is not needed or serves only as the connection point |
| Special processing, such as px to rem or your own rules | PostCSS with a plugin, ready-made or your own |
The main question is whether you need something plain CSS lacks. Variables, nesting, calc() and layers are already in browsers. If only compatibility is missing, take PostCSS or Lightning CSS. If you need mixins and loops, take Sass.
Common mistake
Installing every tool at once "just in case". Sass, PostCSS with both Autoprefixer and postcss-preset-env, a separate Lightning CSS and cssnano in one project duplicate each other: prefixes and minification run several times, and when something breaks it is hard to tell which step caused it. Start with the minimum — for example, Vite alone — and add a tool only for a specific job.