[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...
  ],
}```

[AbdullahMuradSari]

i npm i tailwindcss v3, it worked for me

thank you so much

[Katherine-Holland]

YES! cries into cold coffee :)

[anoduck]

Whew... that was a close one.

[theoneandonlyshadow]

I faced the same issue and that's how I fixed it:

* Install tailwindcss, tailwindcss/postcss, postcss
  `npm install tailwindcss @tailwindcss/postcss postcss`

* Update your `postcss.config.js` file

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

* Add this in your main CSSS file
  `@import "tailwindcss";`

* Remove `autofixer` as its being handled automatically.

Let me know it was any help for you.

This works except I removed:

@import "tailwindcss/base";
@import "tailwindcss/components";

because it showed:

 GET /app/globals.css 404 in 1143ms
Error: Package path ./base is not exported from package D:\VS Code\portfolio new react\node_modules\tailwindcss (see exports field in D:\VS Code\portfolio new react\node_modules\tailwindcss\package.json)
Error: Package path ./components is not exported from package D:\VS Code\portfolio new react\node_modules\tailwindcss (see exports field in D:\VS Code\portfolio new react\node_modules\tailwindcss\package.json)

With all 3 import statements (base, components and utilities), it doesnt work. I checked the tailwindcss in node_module and found no base and components file but only utilities file. Every solution i checked did not mention anything like this.
For additional information, this is my package.json:

"postcss": "^8",
"tailwindcss": "^3.4.17",

[YevheniiKyr]

thanks!

[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

[rozsazoltan]

Related:

• Error: PostCSS plugin tailwindcss requires PostCSS 8
• Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' error when I run using vite
• Cannot build frontend using Vite, TailwindCSS with PostCSS
• How can I integrate TailwindCSS and PostCSS for React project in Vite?
• Unknown word "use strict" error by upgrading TailwindCSS from v3 to v4
• Whenever I run my React-Vite it says [plugin:vite:esbuild] The service is no longer running

[hailduong]

I got the same error and fixed it by moving the packages "tailwindcss @tailwindcss/postcss postcss" from devDependencies all to dependencies

[rozsazoltan]

Honestly, it doesn't really matter whether it's a dev dependency or not. What matters is during the build process - dev dependencies simply don't end up in production, and that's it. If I had to guess, you probably thought you installed them as dev dependencies, but you didn't. Then, during the “move", you successfully installed the dependencies.

If a dependency (that isn't a devDependency) is only used in configuration files and not in your actual project files, most bundlers - like Vite - can properly exclude it from the production build. That's why TailwindCSS and PostCSS packages installed as regular dependencies won't end up in production unless your project explicitly imports them somewhere in the code.

[hailduong]

Yes you might be right about that 🙂. I tried it on another laptop and get stuck again. Still trying to figure out why...

[rozsazoltan]

I believe the problem is in your postcss.config.mjs file.
The error message clearly indicates that you're trying to load the PostCSS plugin from the main TailwindCSS package, similar to how it worked in v3.
However, starting from v4, the plugins have been split into several separate packages, as mentioned in earlier replies.

So in your postcss.config.mjs, you need to reference the new @tailwindcss/postcss package that you've installed - something like this:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

If you're still having trouble, I'm happy to help - just share a reproduction of your project in a public GitHub repo.

[hailduong]

Thank you, I checked again and perhaps somehow it installed version 3, which works, but when I upgraded to version 4 it did not work any more. My project was previously built with webpack, I changed to vite and it works now. :-)

[theoneandonlyshadow]

Thank you, I checked again and perhaps somehow it installed version 3, which works, but when I upgraded to version 4 it did not work any more. My project was previously built with webpack, I changed to vite and it works now. :-)

I suggest you install these versions which is working in my prod if you need them: [email protected] [email protected] [email protected]

[senthil123kumar]

Is this issue resolved ?

I'm using
@tailwindcss/postcss - 4.1.11
autoprefixer - 10.4.21
Postcss- 8.5.6
tailwindcss- 4.1.11

Same error im facing but if I removed tailwind.config.js working.

I'm using angular native federation 19 could you please suggest what to do ?

[rozsazoltan]

Yeah. You get this error if, in the PostCSS config, you try to load the plugin from tailwindcss instead of @tailwindcss/postcss.

• https://tailwindcss.com/docs/upgrade-guide#using-postcss
• Tailwind CSS v4: more packages: Separated package for PostCSS integration
• [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." #15764 (comment)

[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.

npm remove postcss-import autoprefixer
npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs (instead of postcss.config.js)

   export default {
     plugins: {
-      "postcss-import": {},       // This is not needed in v4 (by LightningCSS)
-      autoprefixer: {},           // This is not needed in v4 (by LightningCSS)
-      tailwindcss: {},            // This reproduces the error message, which points out that this is deprecated starting from v4
+      "@tailwindcss/postcss": {}, // Use this from v4
     },
   };

Related:

• Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' error when I run
• Cannot build frontend TailwindCSS with PostCSS
• postcss-import: /node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"
• Tailwind Installing error with internal server error with postcss config
• TailwindCSS styling is not applied
• etc.

It's important to use postcss.config.mjs instead of postcss.config.js.

• How to package a standalone Tailwind v4 component (with tsup) without conflicting with host app styles?

[senthil123kumar]

Hello rozsazoltan,

Thank you for your response and guidance.

I have followed your instructions and uninstalled the specified packages:
npm remove postcss-import autoprefixer
npm install tailwindcss @tailwindcss/postcss postcss

Subsequently, I created a postcss.config.mjs file with the following configuration:
export default {
plugins: {
"@tailwindcss/postcss": {}
}
}

However, after implementing these changes, I am still encountering the same issue when attempting to run the application.

[rozsazoltan]

Previous comment: #15764 (reply in thread) (for others)

The error message is clear. Somewhere, you're still trying to run the old TailwindCSS configuration. If you share a reproduction in a GitHub repo, I'd be happy to take a look.

[senthil123kumar]

Hi rozsazoltan,

Working thanks..