Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
guirak opened this issue Sep 30, 2024 · 0 comments
Labels
bug Something isn't working triage

Comments

@guirak
Copy link

guirak commented Sep 30, 2024

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 guirak added bug Something isn't working triage labels Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage
Projects
None yet
Development

No branches or pull requests

1 participant