Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. #15735

Closed
DanielOberlechner opened this issue Jan 23, 2025 · 52 comments

Comments

@DanielOberlechner
Copy link

What version of Tailwind CSS are you using?

4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

"@tailwindcss/postcss": "^4.0.0", Angular 19.1.3

What version of Node.js are you using?

22.11.0

What browser are you using?

Chrome newest version

What operating system are you using?

macOS M3 Pro

Describe your issue
Today I try to upgrade to Tailwind v4, but without success.

I didn't use postcss, I just have Tailwind in my package.json, my tailwind.config.js and the @import tailwind in my main scss file.

If I upgrade the package to 4.0.0, I have the following error:
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.

I try to install @tailwind/postcss and create a PostCSS config file like this
export default { plugins: { "@tailwindcss/postcss": {} } }

Has anyone any idea how to fix this problem?
On stackoverflow there is a similar question on this topic but the person is using the tailwind directive to import it.
I've solved that but I still get the same error.

Stackoverflow:
https://stackoverflow.com/questions/79380519/how-to-upgrade-tailwindcss

@DanielOberlechner DanielOberlechner changed the title It looks like you're trying to use tailwindcss directly as a PostCSS plugin. [v4] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. Jan 23, 2025
@oscarteg
Copy link

I still had tailwindcss added as part of the integrations in my vite config. After removing it I didn't get this error anymore.

@DanielOberlechner
Copy link
Author

Just moved to tailwindcss from primeflex.

Wanted to refactor with TailwindCSS v4 but so far no luck.

Currently I'm working with the old version 3 but I hope to update soon to the newest version.

@philipp-spiess
Copy link
Member

Yep this error means that for some reason tailwindcss is used as the PostCSS plugin instead of the new @tailwindcss/postcss plugin. Seems like you figured it out though 👍

@kayden1940
Copy link

kayden1940 commented Jan 23, 2025

@chenlcacentury
Copy link

@DanielOberlechner @philipp-spiess I think here is no solution so far in this case. All mentioned is for vite not angular. Can you re-open this issue ? Have to give up the upgrade and wait for update

@Mearman
Copy link

Mearman commented Jan 23, 2025

looks like I'm getting the same issue in NextJS

@bryantomoregie
Copy link

I'm using Vite and I just had to delete tailwindcss from my postcss plugins. Everything works fine now.

@DanielOberlechner
Copy link
Author

https://tailwindcss.com/docs/installation/framework-guides/angular

You should create for Angular a .postcssrc.json with the following content:
{
"plugins": {
"@tailwindcss/postcss": {}
}
}

Then it worked for me...

@Mearman
Have a look at this:
https://tailwindcss.com/docs/installation/framework-guides/nextjs

@vdegenne
Copy link

"Everything's working finally going to bed!"
wake up the next day
pour some coffee
sit on desk
press enter
Big explosion
"Aaah don't you like being a web dev?"

@zenobios
Copy link

https://tailwindcss.com/docs/installation/framework-guides/angular

You should create for Angular a .postcssrc.json with the following content: { "plugins": { "@tailwindcss/postcss": {} } }

Then it worked for me...

@Mearman Have a look at this: https://tailwindcss.com/docs/installation/framework-guides/nextjs

Thanks for the hint. After adding the .postcssrc.json with the proposed content I'm able to at least start my Svelte project via npm run dev. However, I then get the following message in browser:

[plugin:vite:css] [postcss] Missing "./base" specifier in "tailwindcss" package

@vdegenne
Copy link

@zenobios are you using @import "tailwindcss" in your CSS?

@zenobios
Copy link

I'm using

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

@vdegenne
Copy link

That's the problem.

@zenobios
Copy link

Alright, and what's the solution 😅? Sorry, I started using Svelte/SvelteKit along with Tailwind just a couple of weeks ago so I'm not an expert here and might miss something obvious.

@vdegenne
Copy link

Alright, and what's the solution 😅? Sorry, I started using Svelte/SvelteKit along with Tailwind just a couple of weeks ago so I'm not an expert here and might miss something obvious.

In tailwindcss 4 you just have to use @import "tailwindcss"

Also I hardly recommend to read: https://tailwindcss.com/blog/tailwindcss-v4
It's not that long and you'll learn all the new core concepts of tw4.

@hackathononly
Copy link

hackathononly commented Jan 24, 2025

@Suryanshu1005
Copy link

Has anyone able to fix the issue in nextjs? npm run build works fine when building locally but vercel gives this weird error.

./node_modules/nprogress/nprogress.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./node_modules/nprogress/nprogress.css
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.
    at Te (/vercel/path0/node_modules/tailwindcss/dist/lib.js:33:1740)
    at LazyResult.runOnRoot (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:329:16)
    at LazyResult.runAsync (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:258:26)
    at LazyResult.async (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:404:17)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processImmediate (node:internal/timers:447:9)
Import trace for requested module:
./node_modules/nprogress/nprogress.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./node_modules/nprogress/nprogress.css
./node_modules/nprogress/nprogress.css
./src/app/_components/Loadingbar.tsx

@DanielOberlechner
Copy link
Author

@Suryanshu1005
Did you do whats written in this documentation?

https://tailwindcss.com/docs/installation/framework-guides/nextjs

@gaieges
Copy link

gaieges commented Jan 24, 2025

Had this same problem as a result of upgrading to v4 as well. Following the migration guide here helped:

https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

@Yuran-Eduardo
Copy link

I am Facing the same issue, using tailwind in React.js.

Image

@Yuran-Eduardo
Copy link

I am Facing the same issue, using tailwind in React.js.

Image

Solve this error by installing it using cli: https://tailwindcss.com/docs/installation/tailwind-cli

@hitchcliff
Copy link

I solved it by following the documentation and removing one less file which is the most important file for me tailwind.config.js

very upsetting.

@vdegenne
Copy link

vdegenne commented Jan 25, 2025

I solved it by following the documentation and removing one less file which is the most important file for me tailwind.config.js

very upsetting.

It can't be "most important" since in tw4 you don't need it anymore. It's one less file and you don't have to use content anymore. Just write this in your app stylesheet:

@import "tailwindcss";
/* comes with predefined styles */

/* but you can tweak or add new vars here, e.g. */
@theme {
  --text-crazy: 100px; /* <span class="text-crazy">boom</span> */
}

Migration is pretty straightforward.

@PrzemyslawSochon
Copy link

PrzemyslawSochon commented Jan 25, 2025

I kept getting errors when trying to manually update from v3 to v4, regardless of that I did. So I decided to use the automatic tool that tailwind team offers here Using upgrade tool

Unfortunately, the tool itself was quirky, but at the end of the day I've managed to run it. Here's how:

The tool only works for Tailwind v3, so I've downgraded the Tailwind package.

However, after running npx @tailwindcss/upgrade@next I kept getting:

Could not determine configuration file for: ./app/globals.css │ Update your stylesheet to use @config to specify the correct configuration file │ explicitly and then run the upgrade tool again.

As described, I explicitly added direction to my config file at the top of my globals.css:
@config "../tailwind.config.ts";

After that I still kept getting errors about missing directions inside node_modules (!) which is bogus. I worked around it by passing list of files I want to migrate by directly pasting them into the command:

npx @tailwindcss/upgrade@next ./app/globals.css

After that, the app was fixed. Depending on your files and their location you might want to adjust that.

@andreipatza
Copy link

Anyone with the same error when using cli from v0.dev?

@Suryanshu1005
Copy link

So, I was able to fix the error by making below changes:
added this in postcss.config.js file

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

removed utility, base and component from global.css and instead added

@import "tailwindcss";

and lastly installed

"@tailwindcss/postcss": "^4.0.0",

Hope this helps. Thank you everyone for the responses.

@zulfiismailovdemiri
Copy link

So, I was able to fix the error by making below changes: added this in postcss.config.js file

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

removed utility, base and component from global.css and instead added

@import "tailwindcss";

and lastly installed

"@tailwindcss/postcss": "^4.0.0",

Hope this helps. Thank you everyone for the responses.

great. just solved as you, using laravel-mix for any project module.exports = { plugins: { '@tailwindcss/postcss': {}, autoprefixer: {}, } } and on webpack.mix.js: mix.js('src/js/app.js', 'assets/js') .postCss('src/css/style.css', 'assets/css', [ require('@tailwindcss/postcss'), ]);

@GoulartNogueira
Copy link

Solved (at least on Next.js)

  1. Went back to v3
  2. Upgrade to V4 by running: $ npx @tailwindcss/upgrade@next

Source:
https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

@ms-dosx86
Copy link

I was trying to import tailwindcss in my index.scss file which was imported in main.tsx. It doesn't work.

When I created a separate index.css file which imported tailwindcss and included it in index.html it finally worked.

@eliotis
Copy link

eliotis commented Jan 26, 2025

NX Monorepo problems with Angular and upgrade to Tailwind 4

After following instructions for the Angular upgrade to Tailwind 4.0 I get a bunch of this:

[ERROR] Cannot apply unknown utility class: bg-white [plugin angular-sass]

    node_modules/tailwindcss/dist/lib.js:17:296:
      17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply unknown...
         ╵                                    ^

    at onInvalidCandidate (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:17:297)
    at ee (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:12:116086)
    at /home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:17:260
    at D (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:3:3502)
    at D (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:3:3742)
    at Ce (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:17:150)
    at jr (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:33:800)
    at async Ur (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:33:1053)
    at async nt (/home/takis/Code/eliotis/node_modules/@tailwindcss/node/dist/index.js:10:3251)
    at async p (/home/takis/Code/eliotis/node_modules/@tailwindcss/postcss/dist/index.js:8:3200)

  This error came from the "onLoad" callback registered here:

    node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...

for many utility classes that previously worked fine. I created the .postcssrc.json file as instructed (would not build without it) What am I missing?

@MmKargar
Copy link

The solution for me was
1- yarn add @tailwindcss/postcss

2- touch postcss.config.js

export default {
    plugins: {
        '@tailwindcss/postcss': {},
        autoprefixer: {},
    },
};

paul-nguyen-1 added a commit to paul-nguyen-1/BeavsHubV2 that referenced this issue Jan 27, 2025
@Thisizzellie
Copy link

I was using 'Vite' and selected react and tailwind there earlier. which is why I was getting the error, which automatically configures Tailwind with PostCSS

@ikitozen
Copy link

ikitozen commented Jan 28, 2025

manual route for vue 3

  1. package.json

"devDependencies": {
"@tailwindcss/postcss": "^4.0.0",
"tailwindcss": "^4.0.0"
}

  1. postcss.config.js (or other...)

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

  1. tailwind.css (or your ...)
    @import "tailwindcss";

  2. main.ts (or your ...)
    import { createApp } from 'vue';
    import App from './App.vue';
    import './assets/tailwind.css';
    createApp(App).mount('#app');

@BarishSarac
Copy link

NextJS Same issue
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.

How's this possible major version release of a package that has millions of weekly download has this big of a problem? crazy

@igorakkerman
Copy link

In case you came here having this problem with Nuxt:

The Tailwind module for Nuxt is not necessary at this point but might be back in the future:
nuxt-modules/tailwindcss#820

@BarishSarac
Copy link

If you came here to migrate your project to v4 properly, follow
https://blog.logrocket.com/getting-ready-tailwind-v4/

npx @tailwindcss/upgrade@next

does pretty good job

@rftglyv
Copy link

rftglyv commented Jan 29, 2025

Just follow this guide https://tailwindcss.com/docs/installation/framework-guides/nextjs
I've created Next app with create-next-app and it created with old version of Tailwind and its config. But Tw is changed so we have to manually update 2 things.

  1. globals.css tw import
@import "tailwindcss";
  1. postcss.config.mjs file
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

@jjwilliams42
Copy link

jjwilliams42 commented Jan 29, 2025

This can be reproduced by just creating a new Vue project, then following the instructions from the tailwind installation guide (using vite) at https://tailwindcss.com/docs/installation/using-vite. Which guides you to use @tailwindcss/vite (nothing about postcss - this is why I'm confused)

I've created a fresh repo at https://github.com/jjwilliams42/tailwind-issue

I'm using node v23.6.0

npm create vue@latest
npm install
npm install tailwindcss @tailwindcss/vite
# modify files according to tailwind vite documentation
npm run dev

Error

failed to load config from C:\Projects\tailwind-issue\vite.config.js
error when starting dev server:
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.
    at wn (file:///C:/Projects/tailwind-issue/node_modules/tailwindcss/dist/lib.mjs:33:1737)
    at file:///C:/Projects/tailwind-issue/node_modules/.vite-temp/vite.config.js.timestamp-1738179398399-2e34995632257.mjs:14:5
    at ModuleJob.run (node:internal/modules/esm/module_job:272:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:580:26)
    at async loadConfigFromBundledFile (file:///C:/Projects/tailwind-issue/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:54130:15)
    at async loadConfigFromFile (file:///C:/Projects/tailwind-issue/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:53959:24)
    at async resolveConfig (file:///C:/Projects/tailwind-issue/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:53474:24)
    at async _createServer (file:///C:/Projects/tailwind-issue/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:43702:18)
    at async CAC.<anonymous> (file:///C:/Projects/tailwind-issue/node_modules/vite/dist/node/cli.js:746:20)

New to tailwind. Was creating a greenfield project using vue + vite + tailwind, ran into this error immediately upon using tailwind my first time.

@wongjn
Copy link
Contributor

wongjn commented Jan 29, 2025

@jjwilliams42 You've made a mistake in vite.config.js. You'd want to use the @tailwindcss/vite in that file, not tailwindcss:

 import { fileURLToPath, URL } from 'node:url'
-import tailwindcss from 'tailwindcss'
+import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'

@jjwilliams42
Copy link

D'oh! That did it, thank you :)

@FahadBinHussain
Copy link

I am Facing the same issue, using tailwind in React.js.
Image

Solve this error by installing it using cli: https://tailwindcss.com/docs/installation/tailwind-cli

Worked using cli, Thanks a lot

@DasminX
Copy link

DasminX commented Jan 30, 2025

I've got this error today. The solution was to do the initialization work again for these two paths:
https://tailwindcss.com/docs/installation/using-vite
and then:
https://tailwindcss.com/docs/installation/using-postcss

What's important, creating postcss.config with .mjs extension was crucial for me.
I will defenitely try to reproduce it again tomorrow and confirm these conclusions.

@jesseagleboy
Copy link

I think the issue for me was that my Astro config file still had the tailwindcss package even when I used the astro add tailwind. The integrations property had Tailwind while a new property of vite had the new Tailwind integration.

What it looks like after deleting the Tailwind integration from the integrations property:
Image

JuniorTunarr added a commit to qexxep/insider-front that referenced this issue Feb 1, 2025
tailwind 4버전 호환 문제로 인한 오류들 수정해서 올립니다.
1. "postcss" module not found 에러
2. tailwind.config 수정
3. globals.css 내 tailwindcss import 경로 수정

Reference:
https://tailwindcss.com/docs/installation/using-vite
tailwindlabs/tailwindcss#15735
tailwindlabs/tailwindcss#15778
@znwhite
Copy link

znwhite commented Feb 4, 2025

In Tailwind v4 it looks like there's no more postcss config file, nor tailwind config file for that matter. For example, to add custom colors you put them directly in your main css file:

@import "tailwindcss";

@theme {
  --color-ivy: #1c4044;
  --color-moss: #004d49;
  --color-clover: #058466;
  --color-eggshell: #f9f8f3;
}

Here's my working vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

And here are my dependencies:

  "dependencies": {
    "@tailwindcss/cli": "^4.0.3",
    "@tailwindcss/postcss": "^4.0.3",
    "@tailwindcss/vite": "^4.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^7.1.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.17.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.3",
    "vite": "^6.0.5"
  }

Hope this helps people.

@DanielOberlechner
Copy link
Author

In Tailwind v4 it looks like there's no more postcss config file, nor tailwind config file for that matter. For example, to add custom colors you put them directly in your main css file:

Thats not correct.
If you are using vite there is no postcss config.
If you use Angular, NextJS or similar there is one.

In your special case you are right, but as I wrote in the issue in my case there is one.

@vdegenne
Copy link

vdegenne commented Feb 4, 2025

I'm pretty sure you still need tailwind.config.js config file with Vite (unless you use @tailwindcss/vite(?) which I don't use because the default works for me).

Also Vite is using postcss in the background of course, just because you don't need the config file doesn't mean it's not there.

@Jamshaid-aziz121
Copy link

I can resolve it...now

@zZ1bers
Copy link

zZ1bers commented Feb 6, 2025

Hi, I encountered the same issue. It turned out that @hello-pangea/dnd@17.0.0 requires React 18, but React 19 was installed. I'm not familiar with Angular, but you might want to check the dependencies, maybe there was an update.

@FrischSticks
Copy link

I've spent hours on this one and still haven't figured it out :/

Why must it be so hard...

@philipp-spiess
Copy link
Member

@FrischSticks Ugh, sorry for the frustration. I recommend taking a look at our official getting started guides since it goes into detail about the different packages and how to set up with your build tool: https://tailwindcss.com/docs/installation/using-vite

What exactly are you trying to do that doesn't work?

@CallumBee
Copy link

I am a totally green user of Tailwind and this is the first time using it and came across this issue! I am running it with Laravel Jetstream which came with PostCSS installed. I removed all references of it, uninstalled the package etc and that made it all work! Hope this solves the issue for others.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests