CSS is not included for some Tailwind classes in Pug template (in Vue) #17211
Assignees
Comments
davidrunger
changed the title
RobinMalfait
added a commit
that referenced
this issue
Mar 17, 2025
This PR fixes an issue where `<template lang="…">…</template>` in Vue files should be handled as-if it's the language specified in the `lang` attribute. To do this, we added a new Vue pre processor and run the content through the same pre processor logic as we do for other languages. Fixes: #17211 # Test plan 1. Added a test to verify this works 2. Existing tests still work Visually verified against the reproduction in the issue: | Before | After | | --- | --- | | <img width="1273" alt="image" src="https://github.com/user-attachments/assets/d1accdeb-97cf-48ef-83fb-978832b3e599" /> | <img width="1273" alt="image" src="https://github.com/user-attachments/assets/ab7ec19c-b6c4-43be-8845-096ff4e58808" /> | --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
|
Hey! This has been fixed by #17252 and will be available in the next release. |
|
Wow, thank you for the incredibly quick fix, @RobinMalfait ! 🙇♂️ 🙌 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of Tailwind CSS are you using?
v4.0.14 (the latest released version, at the time of writing)
What build tool (or framework if it abstracts the build tool) are you using?
Vite 6.2.2, Vue 3.5.13, Pug 3.0.3 (the latest released version of each, at the time of writing)
What version of Node.js are you using?
v22.14.0 (the latest LTS release, at the time of writing)
What browser are you using?
Firefox (though I don't think it's relevant)
What operating system are you using?
Linux (Debian / MX Linux) (though I don't think it's relevant)
Reproduction URL
I cannot provide a Tailwind Play URL, because I think that this bug occurs only in Pug templates, whereas Tailwind Play only supports plain HTML.
But here's a public GitHub repo with a minimal reproduction: https://github.com/davidrunger/tailwind-pug-bug-demo
And here's that GitHub repo imported into CodeSandbox: https://codesandbox.io/p/github/davidrunger/tailwind-pug-bug-demo/main?file=%2Fsrc%2FApp.vue
Describe your issue
CSS styles are sometimes not included for some Tailwind classes in Pug templates in my Vue project.
In the reproduction linked above, there is this Vue component:
When viewed in the browser, only the
text-red-500class has any visible effect (making the text red). Thebg-neutral-900class does not have any effect (when served either via the Vite hot-reloading dev server or when compiled and viewed via the Vite static production preview server).Live dev server:
Compiled production server:
I expect that the
bg-neutral-900class in the Pug Vue template would cause Tailwind to include CSS that gives that text a dark background, which is what happens if we go back totailwindcssand@tailwindcss/viteat v4.0.9 :Live dev server:
Compiled production server:
Thank you for Tailwind and for taking a look at this bug!
Edit: The bug also occurs when using the Tailwind PostCSS plugin, rather than the Tailwind Vite plugin (when using Tailwind v4.0.14, and not when using Tailwind v4.0.9). I pushed a branch
use-tailwind-postcss-pluginto the minimal bug reproduction repo that demonstrates this.The text was updated successfully, but these errors were encountered: