Kolja
[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.8 replies