[SOLVED] NuxtUI and/or Tailwind apply only selective styles
Hi. I've just read the blog post regarding the new version of Nuxt,
v3.16.
I updated one of my local projects via the stated command npx nuxi@latest upgrade --dedupe.
The upgrade seemed to work fine. However, once I started the development server via bun dev (I also tried yarn dev and others), I noticed that it seemed to be not compatible with the nuxt-og-image module, which is contained in @nuxtjs/seo.
This is the error message I received when trying to run the development server:
I deactivated @nuxtjs/seo, and the server started successfully.
However, after that, the design was off. What I mean by "off" is that even though Tailwind was installed (I'm using @nuxt/ui). Some Tailwind classes worked, others didn't—I didn't find any pattern behind this.
I know that NuxtUI in v3 uses Tailwind v4. But for this project, I chose to stay with NuxtUI v2 and keep Tailwind v3.
Here's a screenshot of what I mean by "off":
https://kolja.smmall.cloud/MTc0MTM4MTQwNzMxMg
vs.
https://kolja.smmall.cloud/MTc0MTM4MjI3NTgzMw
Deleting node_modules and so reinstalling didn't change anything.
To give you an even weirder example: Using the class text-4xl works, but text-5xl doesn't. All of this used to work before the upgrade to 3.16.
Changing Nuxt back to 3.15 solved all issues.
Thanks for your work, and I hope this will be solved soon! Maybe I overlooked something.5 Replies
Hi @Kolja. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Thank you for sharing your experience with upgrading to Nuxt v3.16. The issues you're encountering with selective Tailwind styles and compatibility with
nuxt-og-image are indeed frustrating, but they appear to be related to known issues in recent Nuxt versions.
Issues with nuxt-og-image module
The error you're seeing with nuxt-og-image appears to be related to path resolution issues that have been reported in recent Nuxt versions. Several users have reported similar "module cannot be imported in server runtime" errors after upgrading to newer Nuxt versions (3.14+), as documented in GitHub issues #29804 and #28850.
Tailwind/UI styling issues
Regarding the selective Tailwind styles issue, this could be related to a few factors:
1. HMR and build issues: There have been reports of HMR (Hot Module Replacement) not working properly in Nuxt 3.15.3+ with Tailwind, as mentioned in issue #30783 and issue #31096.
2. Tailwind configuration: Since you're using NuxtUI v2 with Tailwind v3, but Nuxt 3.16 might be expecting different configurations, there could be compatibility issues. The blog post about UI Pro migration mentions that "Nuxt UI v3 uses Tailwind CSS v4 that follows a CSS-first configuration approach" as noted here.
3. resolveConfig issues: There was a specific issue with resolveConfig in Tailwind not working in Nuxt 3.15.3, as reported in issue #30795.
Possible solutions
Since reverting to Nuxt 3.15 solved your issues, that's a valid temporary solution. However, if you want to try fixing it while staying on 3.16:
1. Check if your Tailwind configuration needs updating for compatibility with newer Nuxt versions.
2. You might need to update how you import Tailwind in your CSS files, as the approach has changed in newer versions.
3. For the nuxt-og-image issue, you might need to wait for an update to the @nuxtjs/seo package that's compatible with Nuxt 3.16.
It's worth noting that these types of issues often get resolved in subsequent patch releases, so keeping an eye on updates to Nuxt and related packages is recommended.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@759924319437979648> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
GitHub
Styling breaks after upgrading to nuxt 3.16 · Issue #960 · nuxt-mod...
Environment Operating System: Darwin Node Version: v23.8.0 Nuxt Version: 3.16.0 CLI Version: 3.22.5 Nitro Version: 2.11.5 Package Manager: npm@10.9.2 Builder: - User Config: - Runtime Modules: - Bu...
Thanks for posting this, I found the same issues after my upgrade
Thanks so much, this solved it!