PostCSS and Tailwind CSS: Setup Guide

How Tailwind and PostCSS relate

Tailwind CSS generates utility classes from the class names it finds in your source files. One of the ways to run it is as a PostCSS plugin, so it plugs into any build tool that already runs PostCSS: webpack with postcss-loader, Next.js, Vite and others.

In Tailwind CSS v4 that plugin is published as @tailwindcss/postcss. At the time of checking, its latest version is 4.3.5, published November 6, 2026.

Step 1: install the packages

npm install --save-dev tailwindcss @tailwindcss/postcss postcss

Step 2: add the plugin to your PostCSS config

export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

That is the whole config for most projects. In v4 the plugin handles @import inlining and vendor prefixing itself, so the postcss-import and autoprefixer plugins that v3 setups used are generally no longer needed.

Step 3: import Tailwind in your CSS

@import "tailwindcss";

This single line replaces the three @tailwind base; @tailwind components; @tailwind utilities; directives used in v3.

Step 4: run your build

Start your usual dev server or build. Use classes such as flex, p-6 or text-blue-600 in your HTML or components and Tailwind generates only the classes it finds.

Plugin options

The package README documents two useful options:

• base: the directory Tailwind scans for source files. It defaults to the current working directory.
• optimize: controls Lightning CSS optimisation. By default it is enabled when NODE_ENV is production.

import tailwindcss from '@tailwindcss/postcss'
import path from 'node:path'

export default {
  plugins: [
    tailwindcss({ base: path.resolve('./src') })
  ]
}

Coming from Tailwind v3

Tailwind provides an official upgrade tool (npx @tailwindcss/upgrade) that rewrites much of a v3 project automatically. Run it on a clean git branch so you can review the changes.

PostCSS or the Vite plugin?

If your project uses Vite, Tailwind also offers @tailwindcss/vite, a dedicated Vite plugin. Both work; the PostCSS plugin is the more universal choice when you also need other PostCSS plugins or use webpack, Next.js or a custom pipeline.

Combining Tailwind with other PostCSS plugins

You can still add plugins around Tailwind. For example, a project might keep a custom plugin that checks design tokens after Tailwind runs. Remember that plugins execute in listed order.

Common errors and fixes

Error saying tailwindcss can't be used directly as a PostCSS plugin

Your config still lists tailwindcss from a v3 setup. Install @tailwindcss/postcss and use it instead.

No styles are generated

Check that your CSS contains @import "tailwindcss"; and that the files using classes are inside the scanned base directory.

Duplicate prefixes or slow builds

Remove autoprefixer and postcss-import if you added them out of habit; v4 already covers that work.

Config not found

Use a supported file name such as postcss.config.mjs in the project root. See the PostCSS config guide.

Summary

• Install tailwindcss, @tailwindcss/postcss and postcss.
• Register @tailwindcss/postcss in your PostCSS config.
• Put @import "tailwindcss"; in your main CSS file.
• Drop Autoprefixer and postcss-import unless you have a specific reason to keep them.