Nuxt•3d ago

my project's GUI suddenly ran out of color (nuxtui3/tailwind4)

Hey'all, I'm absolutely going mad here and I'd really appreciate your help. I've been working all week long on a project and just as I've deployed the final changes for today, I've noticed that all of my GUI suddenly lacked color on the server. Checked it with multiple devices, with the same result. I re-ran build + deploy, no avail. Restarted the project locally, now the local build is black and white here too, what in the!? Everything else works fine, no errors are thrown, it's just that tailwinds colors / nuxtui3's theme colors cannot be resolved, it seems. So I've tried to delete the browser-, docker- and bun-caches, nothing. Deleted .nuxt and node_modules, even restarted my machine out of despair. Nope, GUI's still in black and white. Now, I hear you say 'ha, that's so obvious – you've just f upped your code somewhere along the line!' But guess what, if I checkout some very early commits, that worked 100%, they now are, you guessed it, in black and white, too. No colors. Tried multiple browsers. Nothing. Guys, I'm running out of ideas, could anyone help me with this? Thanks.

11 Replies

kapa.ai•3d ago

Hi @marc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it seems you're experiencing an issue with color rendering in your Nuxt 3 project using Nuxt UI and Tailwind CSS. While the exact cause isn't clear from the knowledge sources, I can offer some suggestions based on related information: 1. Check your Tailwind configuration: Make sure your tailwind.config.ts file is properly set up. As mentioned in the Nuxt UI Theming documentation, you need to ensure that your color configurations are correct, especially if you're using custom colors. 2. Verify your app configuration: Check your app.config.ts file to ensure that the UI colors are properly defined. According to the Nuxt UI Theming documentation, you can set primary and gray colors like this:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

3. Smart Safelisting: If you're using dynamic color assignments, you might need to safelist colors manually. The Nuxt UI Theming documentation mentions:

export default defineNuxtConfig({
  ui: {
    safelistColors: ['orange']
  }
})

export default defineNuxtConfig({
  ui: {
    safelistColors: ['orange']
  }
})

4. Check for CSS variable issues: The Nuxt UI uses CSS variables for dynamic colors. Ensure these are being properly generated and applied. 5. Dark mode settings: If you've recently changed dark mode settings, this could affect color rendering. Check your nuxt.config.ts for any recent changes to color mode preferences. 6. Font issues: Interestingly, one user reported a similar issue that was resolved by changing the font. As mentioned in a Stack Overflow post, changing the font from Tajwal to another font resolved their color issues. 7. Upgrade third-party configs: If you've recently upgraded Nuxt, make sure to upgrade any third-party configurations that depend on the directory structure, as mentioned in a GitHub pull request. 8. Clear browser caches thoroughly: Although you mentioned clearing caches, ensure you've cleared all relevant caches, including the nuxt-color-mode entry from your browser's local storage, as mentioned in the Nuxt UI Theming documentation. If none of these suggestions resolve the issue, it might be worth creating a minimal reproduction of the problem and seeking help through the Nuxt community channels or by reporting a bug if you believe it's a Nuxt-specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@361858292755988481> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

marcOP•3d ago

kinda funny, that it's even broken in the devtools

Kal•3d ago

I guess, if you've run out of exploration, then reboot the machine? 🤣

marcOP•3d ago

already did that 😉 happy to provide any info necessary to debug it

marcOP•3d ago

Guess the css preprocessor has gone haywire?! But, um, how to fix it?

Kal•3d ago

A vaguely recall seeing this in the past but I have no recollection of details; I remember being really confused

marcOP•3d ago

https://github.com/nuxt/ui/issues/3374#issuecomment-2675290067 that was it, case closed

GitHub

Tailwind not loading correctly · Issue #3374 · nuxt/ui

Environment Mac OS Node version v20.18.1 Nuxt v3.15.4 Is this bug related to Nuxt or Vue? Nuxt Version v3.0.0-alpha13 Reproduction follow installation from guide: npx nuxi init -t ui3 start: npm ru...

marcOP•3d ago

thanks though! so apparently tailwind pushed a breaking change, whoopsie

negative•2d ago

omg I spent hours today trying to fix this, thank you

Gaming

Programming

my project's GUI suddenly ran out of color (nuxtui3/tailwind4)

Did you find this page helpful?