-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Open
Description
What version of Tailwind CSS are you using?
tailwindcss: "4.1.10",
"@nuxtjs/tailwindcss": "^7.0.0-beta.0",
`"@tailwindcss/vite": "^4.1.4"
What build tool (or framework if it abstracts the build tool) are you using?
`"@tailwindcss/postcss": "^4.1.11"
What version of Node.js are you using?
v23.7.0
What browser are you using?
Chrome
What operating system are you using?
Red Hat Linux 9 (RHEL9)
Reproduction URL
Stackblitz
Originally reported to Nuxt #32575
Describe your issue
Environment
- We are creating a Nuxt mono repo (using pnpm and Turbo Repo) for a client that will have a 'base layer' with shared TailwindCSS and Daisy UI components.
- We have configured the base layer to use @nuxtjs/tailwindcss to configure Tailwind.
Reproduction
- A minimal example can be found in this Stackblitz
- Note, Stackblitz defaults to pnpm but I ran into errors trying to get turborepo running with pnpm
- To setup, cd packages/myUi > npm install > npm run dev
- Open a second terminal window, cd apps/myApp > npm install > npm run dev

Describe the bug

- On the left you will see the Base Layer with a Dialog that says "Hello". This shows that Tailwind / Daisy are configured and running correctly in the base layer
- On the right you will see the App with a card, button, and alert to show that Tailwind / Daisy are configured from the Base Layer and running correctly.
- ERROR: The Issue is the dialog in the App Layer, notice in the base layer, the Hello DIalog has a 'backdrop' and the dialog is centered. However in the App layer, there is no backdrop and the dialog div is actually just unstyled in the upper left corner.
- We are using the Daisy Ui 'dialog method'
- The Chrome dev tools are showing a 'psuedo css' variable ::backdrop being append directly to the dialog.

- Not sure where this error is occurring, is it Nuxt, PostCss, NuxtJS/Tailwind module?
Metadata
Metadata
Assignees
Labels
No labels