Kolja
Kolja
NNuxt
Created by Kolja on 3/7/2025 in #❓・help
[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''
✔ 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.
8 replies