Fix "It looks like you're trying to use tailwindcss directly as a PostCSS plugin" (v4)

The problem

After upgrading to Tailwind v4, the build died immediately:

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` and update your PostCSS configuration.

What didn't work

Pinning back to tailwindcss@3 — works, but throws away the v4 engine and breaks any @theme/@import "tailwindcss" you've started using.
Deleting node_modules and the lockfile — same error; this is a config change, not a corrupted install.
Installing @tailwindcss/postcss while leaving tailwindcss listed in postcss.config.js — the old plugin entry is tried first and errors anyway.

The fix

npm uninstall postcss autoprefixer
npm install tailwindcss @tailwindcss/postcss

// postcss.config.mjs — v4's PostCSS glue is its own package
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

/* app.css — v4 replaces tailwind.config.js content scanning with one @import */
@import "tailwindcss";

Delete tailwind.config.js unless you have a plugin you truly need; theme customization now lives in CSS via @theme { --color-brand: #0ea5e9; }.

Why it works

v4 split the engine from the PostCSS integration; the build needs @tailwindcss/postcss as the plugin and a single @import "tailwindcss" entry, after which content detection is automatic and the v3 config file has nothing left to do.

Continue reading — $1/month

The full fix, verbatim, plus every other solution in the feed.