Tailwind v4 "use @tailwindcss/postcss" - Fix PostCSS Plugin Move

Tailwind CSS v4 split its PostCSS integration into a separate package, @tailwindcss/postcss. A config that still lists tailwindcss directly under PostCSS plugins fails on v4 with an explicit message to switch to the new package.

What this error means

After upgrading to Tailwind v4 the CSS build fails with It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package. It is deterministic and appears at PostCSS config load.

build output

Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS
plugin. The PostCSS plugin has moved to a separate package, so to continue
using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss`.

Common causes

v3-style PostCSS config on Tailwind v4

The postcss.config still references tailwindcss: {} as the plugin. In v4 that package no longer exposes a PostCSS plugin - it lives in @tailwindcss/postcss.

Partial v4 upgrade

Tailwind was bumped to v4 but the PostCSS plugin package was not installed and the config not updated, leaving the old wiring in place.

How to fix it

Install and reference the new plugin package

Add @tailwindcss/postcss and use it in the PostCSS config.

postcss.config.mjs

npm install -D @tailwindcss/postcss
// postcss.config.mjs
export default {
  plugins: { '@tailwindcss/postcss': {} },
}

Complete the v4 migration

Confirm tailwindcss is on v4: npm ls tailwindcss.
Replace tailwindcss: {} with '@tailwindcss/postcss': {} in the PostCSS config.
Migrate the CSS entry to the v4 @import "tailwindcss"; form if upgrading from v3 directives.

How to prevent it

Use @tailwindcss/postcss (not tailwindcss) as the PostCSS plugin on v4.
Upgrade Tailwind and its PostCSS wiring together.
Follow the official v4 upgrade guide when bumping the major.