-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Comments
tailwindcss
directly as a PostCSS plugin.tailwindcss
directly as a PostCSS plugin.
I still had |
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. |
Yep this error means that for some reason |
Doesn't work on my case using vite, please reopen this issue |
@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 |
looks like I'm getting the same issue in NextJS |
I'm using Vite and I just had to delete tailwindcss from my postcss plugins. Everything works fine now. |
https://tailwindcss.com/docs/installation/framework-guides/angular You should create for Angular a .postcssrc.json with the following content: Then it worked for me... @Mearman |
"Everything's working finally going to bed!" |
Thanks for the hint. After adding the
|
@zenobios are you using |
I'm using @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities"; |
That's the problem. |
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 Also I hardly recommend to read: https://tailwindcss.com/blog/tailwindcss-v4 |
Astro with Tailwind 4.0 : https://tailwindcss.com/docs/installation/framework-guides/astro |
Has anyone able to fix the issue in nextjs? npm run build works fine when building locally but vercel gives this weird error.
|
@Suryanshu1005 https://tailwindcss.com/docs/installation/framework-guides/nextjs |
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 |
Solve this error by installing it using cli: https://tailwindcss.com/docs/installation/tailwind-cli |
I solved it by following the documentation and removing 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 @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. |
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
As described, I explicitly added direction to my config file at the top of my globals.css: 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:
After that, the app was fixed. Depending on your files and their location you might want to adjust that. |
Anyone with the same error when using cli from v0.dev? |
So, I was able to fix the error by making below changes:
removed utility, base and component from global.css and instead added
and lastly installed
Hope this helps. Thank you everyone for the responses. |
great. just solved as you, using laravel-mix for any project |
Solved (at least on Next.js)
Source: |
I was trying to import When I created a separate |
NX Monorepo problems with Angular and upgrade to Tailwind 4After following instructions for the Angular upgrade to Tailwind 4.0 I get a bunch of this:
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? |
The solution for me was 2- touch
|
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 |
manual route for vue 3
"devDependencies": {
module.exports = {
|
NextJS Same issue How's this possible major version release of a package that has millions of weekly download has this big of a problem? crazy |
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: |
If you came here to migrate your project to v4 properly, follow
does pretty good job |
Just follow this guide https://tailwindcss.com/docs/installation/framework-guides/nextjs
@import "tailwindcss";
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config; |
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
Error
New to tailwind. Was creating a greenfield project using vue + vite + tailwind, ran into this error immediately upon using tailwind my first time. |
@jjwilliams42 You've made a mistake in import { fileURLToPath, URL } from 'node:url'
-import tailwindcss from 'tailwindcss'
+import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite' |
D'oh! That did it, thank you :) |
Worked using cli, Thanks a lot |
I've got this error today. The solution was to do the initialization work again for these two paths: What's important, creating postcss.config with .mjs extension was crucial for me. |
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
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:
Here's my working vite config:
And here are my dependencies:
Hope this helps people. |
Thats not correct. In your special case you are right, but as I wrote in the issue in my case there is one. |
I'm pretty sure you still need Also Vite is using |
I can resolve it...now |
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. |
I've spent hours on this one and still haven't figured it out :/ Why must it be so hard... |
@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? |
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. |
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
The text was updated successfully, but these errors were encountered: