NuxtN
Nuxt11mo ago
7 replies
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:

✔ Vite client built in 72ms                                                                          3:42:38 AM
✔ Vite server built in 1042ms                                                                        3:42:39 AM

[WEBSITE 2:35:53 AM]  出错啦  出错啦: Could not load /Users/kolja/Sites/WEBSITE/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs (imported by node_modules/nuxt-og-image/dist/runtime/server/og-image/satori/instances.js): ENOENT: no such file or directory, open '/Users/kolja/Sites/WEBSITE/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs''


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.
Was this page helpful?