ui icon indicating copy to clipboard operation
ui copied to clipboard

Since Tailwind First Class HMR, nuxt-ui components css classes not taken into account at first launch

Open guirak opened this issue 1 year ago • 0 comments

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.

image

  • Stop and restart the server
pnpm run dev

All tailwind classes are correctly taken into account.

image

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

guirak avatar Sep 30 '24 14:09 guirak