gotchacsstailwindModerate
autoprefixer placement relative to tailwindcss in PostCSS config
Viewed 0 times
autoprefixerPostCSS ordervendor prefixplugin orderpostcss.config
Problem
CSS properties that require vendor prefixes (e.g., -webkit-line-clamp) are not prefixed in the output, despite autoprefixer being installed. Or autoprefixer generates prefixes for Tailwind internal custom properties unnecessarily.
Solution
Always place tailwindcss before autoprefixer in the PostCSS plugins array. Autoprefixer should run last:
This is the order recommended in Tailwind docs and the one generated by most scaffolding tools.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {}, // runs first — generates CSS from utilities
autoprefixer: {}, // runs last — adds vendor prefixes to generated CSS
},
};This is the order recommended in Tailwind docs and the one generated by most scaffolding tools.
Why
PostCSS plugins run in array order. tailwindcss must process @tailwind directives and generate utility CSS before autoprefixer attempts to prefix the output. Reversed order means autoprefixer sees directives, not CSS properties.
Gotchas
- In v4 with the Vite plugin, neither tailwindcss nor autoprefixer are needed in postcss.config.js — the plugin handles both.
- autoprefixer may warn about certain CSS custom properties — this is usually a false positive and can be suppressed.
- Modern browsers have dropped many prefixes — check your Browserslist config before adding autoprefixer at all.
Context
When setting up the PostCSS pipeline for a Tailwind project.
Revisions (0)
No revisions yet.