Fix: “trying to use tailwindcss directly as a PostCSS plugin”

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.

The fix

Install the new plugin package:

npm install -D @tailwindcss/postcss

Then change the plugin name in postcss.config.js (or .mjs / .cjs) from tailwindcss to @tailwindcss/postcss:

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Your CSS entry file should import Tailwind the v4 way:

@import "tailwindcss";

Why it happens

Up to v3, the tailwindcss package was the PostCSS plugin, so every guide told you to write tailwindcss: {} in postcss.config.js. In v4 the plugin lives in its own package, @tailwindcss/postcss. The main package now throws this error on purpose when PostCSS tries to load it the old way.

It usually shows up when a project upgrades to v4, or when you follow a v3 tutorial but npm install gives you v4.

Can I keep autoprefixer?

Yes. With autoprefixer: {} left in the config, the build still succeeded. But Tailwind v4 adds vendor prefixes itself, so you can remove autoprefixer from the config and uninstall it.

What didn’t work