TailwindCSSDependencies

Tailwind: trying to use tailwindcss directly as a PostCSS plugin

It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package...

In short: Tailwind CSS v4 moved its PostCSS plugin into @tailwindcss/postcss, but your config still uses the v3 setup.

Why it happens

An install or AI edit upgraded tailwindcss to v4 while postcss.config still lists tailwindcss: {} and your CSS still uses the v3 @tailwind base/components/utilities directives.

How to fix it

1. Decide: stay on v3 (npm install -D tailwindcss@3) or move to v4. Don't mix.
2. For v4 with PostCSS: npm install tailwindcss @tailwindcss/postcss postcss and set the plugin to "@tailwindcss/postcss": {}.
3. For v4 with Vite you can use @tailwindcss/vite in vite.config instead of PostCSS.
4. Replace the three @tailwind lines in your CSS with @import "tailwindcss";.
5. autoprefixer and postcss-import aren't needed with v4. Run the official upgrade tool (npx @tailwindcss/upgrade) for bigger projects.

Example

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

/* globals.css */
@import "tailwindcss";

Copy-paste fix prompt

I'm getting this error in my app:

It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package...

[Paste the full error, stack trace, and the file it points to here]

Likely cause: Tailwind CSS v4 moved its PostCSS plugin into @tailwindcss/postcss, but your config still uses the v3 setup.

Task: Check which Tailwind major version is installed and which config style the project uses. Pick one (v3 or v4), and make package.json, the PostCSS/Vite config, and the main CSS file consistent with it.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, Bolt, Lovable, v0. Last reviewed 2026-11-13.