Skip to content

@tailwindcss/vite plugin not processing pseudo classes #18555

@mgd216

Description

@mgd216

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

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
Image

Describe the bug

Image
  • 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.
Image
  • Not sure where this error is occurring, is it Nuxt, PostCss, NuxtJS/Tailwind module?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions