Suggest an editImprove this articleRefine the answer for “How does Tailwind integrate with PostCSS?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Tailwind** integrates with PostCSS as an ordinary PostCSS plugin that is connected into the build chain and processes CSS at compile time. **Key point:** Tailwind runs before Autoprefixer and generates utility classes, and then PostCSS applies the other plugins (prefixes, minification and so on).Shown above the full answer for quick recall.Answer (EN)ImageTailwind integrates with PostCSS as an **ordinary PostCSS plugin** that is connected into the build chain and processes CSS at compile time. --- ### **What this looks like technically** A project usually has a `postcss.config.js` file, inside which Tailwind is added to the list of plugins: ```js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` That is, Tailwind runs **before Autoprefixer** and generates utility classes, and then PostCSS applies the remaining plugins (prefixes, minification and so on). --- ### **What Tailwind does together with PostCSS** 1. **Generates utility classes** based on the settings in `tailwind.config.js`. 2. **Processes directives** inside the CSS: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` Tailwind expands them into the full set of styles. 3. **Enables Purge (in production mode)**: removes unused classes, shrinking the final file. 4. Passes the result further along the chain of PostCSS plugins. --- ### **Why Tailwind works specifically through PostCSS** - PostCSS gives Tailwind access to the CSS AST → convenient for generating and modifying rules - Tailwind can be easily embedded into any build (Vite, Webpack, Parcel, Gulp) - Additional PostCSS plugins (Autoprefixer, cssnano) immediately become part of the pipeline --- ### **The build chain in reality** ```javascript CSS (with @tailwind directives) ↓ PostCSS (tailwindcss plugin → generation) ↓ PostCSS (autoprefixer → prefixes) ↓ PostCSS (cssnano → minification, if needed) ↓ Finished CSS → browser ``` --- ### **Summary** Tailwind integrates with PostCSS as a plugin: PostCSS plays the role of the engine, and Tailwind is the generator of utility classes. Thanks to this, Tailwind embeds flexibly into any build and automatically goes through all the other postprocessor stages (prefixes, minification, cleanup).For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.