Tailwind CSS 4.0.8 not loading correctly #3374
Comments
|
Did a bit of digging and the issue seems to be coming from this commit. |
|
@WillGyt My current package.json for Starter project: "dependencies": { Still no styles... |
|
It seems there is a regression with the latest update of Tailwind 4.0.8 (dropped 2hrs ago). Key changes for this issue are here:
This happened to us before and was resolved: #3275 @benjamincanac @WillGyt @alapeta However it seems the same workaround still works for now: Replace with |
|
Looking into this further the above workaround only partially helped. I went back to my original solution which was to set the pnpm manager like so: This will bring everything back to the last working version. |
|
@StirStudios This worked, thanks so much. |
|
This workaround works for me also - both for Starter and my own project. |
|
yeah tailwind 4.0.8 breaks the current style import with the workaround, using 4.0.7 until fix comes out |
|
Indeed there has been a regression upstream. Fastest workaround, as suggested, is to pin "resolutions": {
"tailwindcss": "4.0.7",
"@tailwindcss/postcss": "4.0.7",
"@tailwindcss/vite": "4.0.7"
} |
|
@StirStudios thank you for the workaround, it worked for me too! |
|
@StirStudios thank you, it worked |
|
@StirStudios that worked for me as well. Just this alone did it. Thank you. |
|
@StirStudios - thanks for the help. For anyone still struggling, I was able to get "3.0.0.-alpha13" working by manually installing "tailwindcss", "@tailwindcss/postcss", and "@tailwindcss/vite" (all 4.0.7). "dependencies": { |
|
My few cents @TheBigO: you should rather follow solution provided by @sandros94. |
That makes sense @alapeta - thanks for the additional information. |
|
Solution for those using NPM: Add this to your "overrides": {
"tailwindcss": "4.0.7",
"@tailwindcss/postcss": "4.0.7",
"@tailwindcss/vite": "4.0.7"
} |
|
In case anyone is searching for this, "pnpm": {
"overrides": {
"tailwindcss": "4.0.7",
"@tailwindcss/postcss": "4.0.7",
"@tailwindcss/vite": "4.0.7"
}
}, |
|
So the situation is a bit worst than the @import "tailwindcss" theme(static);
@import "@nuxt/ui";We now have to explicitly register sources using the I'll try to find a way to do this within |
|
This one solved the issue for me
@import 'tailwindcss' theme(static);
@import '@nuxt/ui';
@source '../../node_modules/@nuxt/ui/.nuxt';I am using: |
|
For bun (overrides in package.json) |
|
So I did the update to In the next |
|
@bennyzen The |
|
To make sure I really have 4.0.8, I've deleted Thank you, but I'll switch back to 4.0.7 and wait until we have |
To be clear this does not fully resolve the situation. It looks like it does but it does not. Most of the theming comes back but certain aspects like a carousel do not work. Hopefully we get a new fix soon @benjamincanac |
|
@StirStudios As mentioned above, this has been fixed inside https://github.com/nuxt/ui/pull/3373/files. This is why my advice was to stick with |
Where i need to write this? |
|
@projct1 you need to write that in your package.json. |
|
This package.json is working |
|
Still not work, when will 3.0.0-alpha.14 release |
3.0.0-alpha.14 has not been released yet |
|
You can now use 3.0.0-beta.1, do note that you still need to use |
|
Anyone else has an issue now with missing classes in the final CSS when they are only defined in the I am using 3.0.0-beta.2 with tailwind@4.0.9. |
|
@yschroe Did you import Tailwind CSS like this: |
|
Yes, I imported it with Edit after seeing StirStudios response: I am using Nuxt layers as well and my |
|
@benjamincanac @yschroe we can confirm that certain classes are missing for us as well. That said, when we run our Nuxt Layer project in solo mode (not inside a root app), everything works correctly. However, as soon as we use it as a layer inside a root app, some classes are lost. Up until now, we’ve been able to share app.config.ts between the layer and the root project—same with main.css. In other words, whatever is set in the layer has been inherited by the root app. However, many classes are now lost unless we explicitly copy app.config.ts to the root app. Previously, these classes were inherited automatically. Additionally, we have a safelist.txt file to help retain certain classes. This has helped restore some classes that were not caught in app.config.ts. The missing classes seem to include: Overriding a container is not inherited or can it be set from the root app. No matter what we do we cannot get this to work. All of these classes are defined inside app.config.ts. Prior to the Nuxt UI 3 beta and Tailwind CSS 4.0.7, these classes were inherited correctly and were not missing. We are able to update to Nuxt UI 3.0.0-beta.2, while keep tailwind at 4.0.7 and everything works as usual. Close but not fixed from our eyes. |
|
This whole thing is due to Tailwind CSS changes in |
|
@benjamincanac @yschroe thanks for the tips now solved for us. @yschroe if you need any help this is what we needed to do inside our root app main.css
Once you have that it just works! |
|
Sorry folk, running into some issues and found this thread.
Why is this brand new project displaying an error on Using Tailwind classes directly on an element do work though.
These are my packages currently:
This is my configuration: // https://nuxt.com/docs/api/configuration/nuxt-config
import removeConsole from "vite-plugin-remove-console";
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
modules: ["@pinia/nuxt", "@pinia/colada-nuxt", "@nuxtjs/supabase", "dayjs-nuxt", "@vueuse/nuxt", "@nuxt/ui-pro"],
components: {
global: true,
dirs: ["~/components"],
},
ssr: false,
app: {
head: {
charset: "utf-8",
viewport: "width=device-width, initial-scale=1",
},
},
supabase: {
// options: https://supabase.nuxtjs.org/get-started#options
url: process.env.SUPABASE_URL,
key: process.env.SUPABASE_KEY,
//serviceKey: process.env.SUPABASE_SERVICE_KEY,
redirect: false,
redirectOptions: {
login: "/login",
callback: "/confirm",
exclude: [],
},
},
css: ["@/assets/css/main.css"],
//css: ["@/assets/scss/main.scss"],
vite: {
define: {
__VUE_PROD_DEVTOOLS__: process.env.ENVIRONMENT !== "prod",
},
/* css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/scss/_variables.scss" as *; @use "@/assets/scss/_mixins.scss" as *;',
},
},
}, */
plugins: [tailwindcss(), removeConsole()],
},
runtimeConfig: {
public: {
supabaseUrl: process.env.SUPABASE_URL,
supabaseKey: process.env.SUPABASE_KEY,
environment: process.env.ENVIRONMENT,
},
},
});You'll see the bits I've commented relate to SCSS compilation. I've spent an afternoon on this and I just cannot get Nuxt UI Pro v3 working with SCSS files, and I cannot get Tailwind styles applying within a basic CSS file. NOTE: I have removed some packages in the process like PostCSS stuff for example. It'd be great if there was a guide in the docs for at least SCSS compilation as that seems like a common use case. Happy to contribute it myself, when I find out how to 😆 This is proving harder than it should be, or should I revert to 1.7 until 3 is more stable? (not that this threads issue was Nuxt UIs fault) |
|
I can see you have not removed the overrides as that will cause things to break. Remove this from your package. Also remove this from your main.css
Run this command to clear things out
Then your project should work correctly using Tailwindcss 4.0.9 along with Nuxt UI 3beta |
|
@StirStudios - Ahh yip, that's re-aligned to 4.0.9 now, thx 👍 Still cannot apply the TW styles to my custom classes, but I think that might be another TW v4 issue. |
|
I would suspect the issue is including the source of each file as that is what as occurred since TW 4.0.8. |
|
The upgrade guide says you need to do that for CSS files outside your main.css file (if I read that correctly), yet custom classes in my main.css file are not applying their TW utility class styles. Hmmm... I'll keep digging. I'm also new to Tailwind so I prolly just need to get familiar with how TW does things (esp. with v4 cos all the docs and articles out there now reference v3 stuff mostly). Then I just need to find a Nuxt3/TW4 example to get my SCSS compiling. |
Thanks, with manually adding the sources my project now work as before. 👍 I also noticed that not only the classes of my The tailwind docs state that the starting point for scanning the files is the current working directory. If I start the app out of my root folder isn't |
Environment
Is this bug related to Nuxt or Vue?
Nuxt
Version
v3.0.0-alpha13
Reproduction
npx nuxi init -t ui3
Description
There are no colors, no buttons, no borders, no tailwind classes...
I am not sure what happened and when. Just discovered today after cleaning node_modules and reinstalling all packages that tailwind is not loaded correctly.
As you can see the same is for fresh install from provided starter.
Additional context
No response
Logs
The text was updated successfully, but these errors were encountered: