@tailwindcss/vite 4.0.0-alpha.25 and above breaks Scoped CSS styles in Vue production builds (whereas in dev-builds they work)

[sceee]

What version of Tailwind CSS are you using?
Currently using 4.0.0-alpha.30 but the issue occurs since 4.0.0-alpha.25.
The issue is not present in 4.0.0-alpha.24

What build tool (or framework if it abstracts the build tool) are you using?

vite 5.4.10

What version of Node.js are you using?

v20.18.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://github.com/sceee/tailwind-vue-scoped-build-issue

Reproduction steps:

1. Clone repo

2. npm i

3. npm run dev

4. Check browser page, focus on the links beneath "You did it" - it displays the "Vite + Vue 3" links green and the "Some fancy link" red
   
   This is expected as the "Some fancy link" receives a scoped style that can also be seen in the devtools
   
   which is defined as scoped here:
   https://github.com/sceee/tailwind-vue-scoped-build-issue/blob/31c440f57f16fef1671da722f2c6921f08f7ac2d/src/App.vue#L21-L24

5. Stop HMR webserver

6. Run npm run build

7. Run npm run preview to serve the production build

8. Check browser page of the preview - it now displays the "Vite + Vue3" links also (incorrectly) red
   
   See that the (initially) style is now no longer scoped in the browser devtools:
   
   Instead it is now a global style.

As written above, this was introduced with 4.0.0-alpha.25.
If you downgrade to 4.0.0-alpha.24, this issue no longer happens and the scoped style remains during production builds.

I could imagine it has something to do with the dependency changes for @tailwindcss/vite from .24 to .25 (regarding the postcss removal) but this is just a random guess.

Describe your issue

The issue is that css defined in a scoped <style scoped> ... </style> tag results only in scoped css when being served as dev builds.
In production builds, these styles are no longer scoped, instead they are just "global" css and therefore unintentionally affect other elements.

See reproduction steps abov - both (dev and production builds) should emit the same scoped css like

instead of being different between dev and production builds.

[philipp-spiess]

Hey @sceee! Thanks a bunch for this report and sorry for getting back to you with a bit of a delay. We've pushed a fix for this issue now that will be part of the next alpha release. Please let us know if you still run into any issues after that 🙂

[sceee]

Hi @philipp-spiess , thanks a lot for the fix, looking forward to testing it! 🚀