Since Tailwind First Class HMR, nuxt-ui components css classes not taken into account at first launch
Environment
- "@nuxt/ui": "^2.18.6",
- "nuxt": "^3.13.2",
- "vue": "^3.5.10",
Version
v2.18.6
Reproduction
https://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch
Description
Hello,
I'm having a important nuxt ui mono repo project and I'm encountering problems with nuxt/ui since version 6.12.0 of @nuxtjs/tailwindcss.
I was forced to stay in an old version of nuxt/ui to don't have the problem :
"pnpm": {
"overrides": {
"@nuxtjs/tailwindcss": "6.11.4",
"@nuxt/ui": "2.15.2"
}
},
What happens ?
At first launch, css classes used in nuxt ui components are not correctly taken into account. It's necessary to restart a second time the app to have the correct display
The bug is present since the version 6.12.0 of nuxtjs/tailwindcss. Maybe some effect of the First Class HMR.
Step to reproduce
The code at the following link is a minimal reproduction of my project structure : https://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch
- From the root project path, launch the following command :
# Clear the build
./scripts/CleanProject.bash
# Install and prepare
pnpm i; pnpm run dev:prepare
# Launch the app
cd apps/mmi-order-front-office
pnpm run dev
The tailwind classes used in apps and modules are correctly displayed but the tailwind classes defined in the nuxt-ui components are not taken into account.
- Stop and restart the server
pnpm run dev
All tailwind classes are correctly taken into account.
The problem is present too when building the prod version with pnpm run build
The problem seems to happens when using nuxt ui in a nuxt module. Please, have you any ideas, to solve this problem.
Thank you
Additional context
No response
Logs
No response