[v4] stuck at "[postcss] 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."

[kayden1940]

I have done exactly these steps and same result

[wongjn]

Please consider providing a project that reproduces the unexpected behavior so we can help debug for you.

[collin-ho]

for me- literally opening a new react project in vs Code following the documentation exactly gives me the error every time.

[wongjn]

Coul you provide a git repo that reproduces the error please?

[collin-ho]

https://www.youtube.com/watch?v=IXGDK9oZ__Q follow these instructions (which are whats in the documentation) On mac, and you will get the error.

[wongjn]

Would you be able to provide an example repo please? It would be less hassle so that I don't have to watch a video and that I have the same code as you.

[Skhushaal]

Hey, I also faced the same issue.
I think you might have downloaded v4 instead of the previous one if not.

Try completely deleting the postcss.config file and try again.

Hope it helps.

[marioccarloss]

I ran into the same issue when upgrading to Tailwind CSS v4. The problem appears if you're still trying to use tailwindcss directly as a PostCSS plugin, but in v4, that plugin logic now lives in a separate package.

How I fixed it:

1. Make sure you have PostCSS v8 installed:
2. Update and confirm these packages are installed at the versions shown (or newer):

“tailwind-merge”: “^3.0.1”,
“tailwindcss-animate”: “^1.0.7”,
“@tailwindcss/postcss”: “^4.0.5”,
“prettier-plugin-tailwindcss”: “^0.6.11”,
“tailwindcss”: “^4.0.5”,
“postcss”: “^8”

3. In your PostCSS configuration (e.g. postcss.config.js), make sure you require @tailwindcss/postcss instead of tailwindcss directly:

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

// postcss.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/postcss'),
    // other plugins...
  ],
}```

[gogo7654321]

YESSS, TYSM, it was really just autoprefixer causing the issue for me

[chel-ocean]

how do you remove the autofixer?

[wongjn]

Remove it from postcss.config.js.

[developedbyjay]

i npm i tailwindcss v3, it worked for me

[AbdullahMuradSari]

i npm i tailwindcss v3, it worked for me

thank you so much

[Bochra21]

Hello everyone,

I encountered the same issue yesterday while working with Ionic Angular 7.2.0, and I found a solution today. Here’s what worked for me:

In a new project, add ngx-tailwind:

ng add ngx-tailwind

Install Tailwind CSS and dependencies:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS:

npx tailwindcss init

Install the Prettier plugin for Tailwind (optional but recommended for better formatting):

npm install prettier-plugin-tailwindcss

Add the following to your global.scss file:

@tailwind base;
@tailwind components;
@tailwind utilities;

[enesdmc0]

I fixed this issue:

/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
"@tailwindcss/postcss": {},
}
};

export default config;

[Pallava-Joshi]

This is due to wrong version usage of Tailwind, you can either:

Stick with Tailwind v3 → Uses traditional setup with postcss.config.js

(https://v3.tailwindcss.com/docs/guides/vite)
the steps shown in every youtube tutorial, but you need to install:
npm install -D tailwindcss@3

Use the latest Tailwind v4 → Simplified setup, no need for PostCSS, Autoprefixer, or additional config files

https://tailwindcss.com/docs/installation/using-vite
npm install tailwindcss @tailwindcss/vite
only this command is required

if you're stuck with it - just remove package.lock.json file, with clearing the node modules, package.json file's contents where you must have imported postcss and autprefixer(delete those) - and start from fresh following either of the docs

[ygdani89]

Lei un monton de Tuturiales y lo unico qye me fun ciono fue esto : sh npm i -D tailwindcss@3 postcss

[developedbyjay]

Try installing tailwindcss v3.. it worked for me