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"
}
}, |
benjamincanac
changed the title
|
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) |
|
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 |
|
Is anyone else seeing issues with custom colors with Nuxt UI 3 after following this fix? Im adding the custom colours in the way the docs suggest but its creating a cyclical set of css vars where NuxtUI is overwriting the TW vars but then still referencing the TW vars as values to its own vars 🤪
Update: Seems you cant call the color alias the same as the color itself. I suspect this is a bug. Ill report separately. |
That is the suggested way so you are doing things correctly! https://tailwindcss.com/docs/detecting-classes-in-source-files |
Not sure if this helps but once you have defined your colors you ran then setup the root like so: :root { You can also define your custom color in app config or nuxt config and NuxtUI will generate the alias: https://ui3.nuxt.dev/getting-started/theme Check the colors section. |
|
I've got things working - mostly - thanks for nudges in the right direction @StirStudios I still have one oddity which I cannot explain. The tailwind import statement in my main.css file syntax errors:
Not sure if it's helpful but just in case, each underline shows these two errors:
Now, to further confuse things, in my searching for an answer, the following is causing is happening... With the theme(static) import the Nuxt UI theme appears to be working:
But, a little Chat GPT'ing brought up this gem (i.e. always a tad skeptical):
No matter what I do configuration wise in nuxt.config or app.config the Nuxt UI 'theme' is not set or works...
Is that info even valid (because I see you all still defining the static theme), or is it correct but I'm missing some configuration or key info to get it working? UPDATE: Yeeaahh that Chat GPT result feels like some classic disinformation 😆 , restoring the theme import (even with the errors) works including light/dark mode switching. Hmm. |
|
@wherewasitv You probably have a version of tailwindcss < 4.0.8, you should remove any tailwindcss resolutions and refresh your deps. You can check in your lockfile to see which version is used. |
|
@benjamincanac - Version is 4.0.9 and I cleared out the resolutions a couple of posts ago. |
Static is correct, not sure why you are getting a syntax issue though. Also for your theme layer you need to add static as well. |
|
Yeah I added the @theme static in the hope that was the reason but no dice. To resolve this I installed // stylelint.config.js
module.exports = {
extends: [ "stylelint-config-standard" ],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};And I disabled the standard CSS, LESS, and SCSS validation in vsCode's settings e.g. // setting.json
"css.validate": false,
"less.validate": false,
"scss.validate": false, |
|
@wherewasitv by the screenshots its seems that your Follow docs and edit your "files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
} |
this worked for me. ty |
|
I've just migrated from Nuxt UI 2 to 3 and suffering the same issue with missing css variables
Lockfile shows tailwind at 4.0.14, UI Pro at 3.0.0 css/index.css is: |
|
I had a simple use case. Inside an index.vue file: <img :src="post.meta.thumbImage" :alt="post.meta.title" class="w-32 h-32 object-cover mr-4" />None of those classes made it into the production build. Changing my build script to npm and adding this, from a tip above, did solve it. So it does seem to be something introduced in later versions of Tailwind. "resolutions": {
"tailwindcss": "4.0.7",
"@tailwindcss/postcss": "4.0.7",
"@tailwindcss/vite": "4.0.7"
} |
and others
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: