Tailwind CSS Vite Plugins and Client-only bundle

[philipp-spiess]

We’re currently investigating an issue with our new Vite plugin in combination with the client-only builds: tailwindlabs/tailwindcss#15794

The way the Tailwind CSS Vite plugin works is that it leverages the Vite module tree to scan for used class names and then, when the build is done, it will update the .css files with the complete list of necessary classes.

However, when Astro builds the client-only bundle, this seems to happen after the main static bundle is already created. This means that by that time, the main .css file is already finalized and we can't make changes to it anymore.

I wonder if it's possible to add some hooks that we can use to fix this or maybe make it possible to reorder the build steps somehow?

[matthewp]

Hi @philipp-spiess, thanks for posting. You are indeed correct that client code (not just client-only) gets built after the server SSR code. That's because the way we detect these client components (Like <Button client:only /> is by scanning for them during the SSR build process. So reordering is not possible here.

Giving you better hooks is possible though. Am I understanding correctly that you want to update the main bundle based on the classes you discover in the client components?

[florian-lefebvre]

Yeah components can live anywhere so if you have another/better approach, go for it I'd say

[jesus997]

Hey guys, I'm not very experienced here, but I ran into a problem while trying to deploy a test project using Astro + TypeScript + Vue, and I think I have a simpler approach than what I’ve seen suggested (although I’m not sure what performance implications it might have, honestly).

According to the Tailwind documentation, Tailwind by default scans the working directory for classes to include in the build. In Astro’s case, I believe that the default working directory is the directory where Tailwind is imported—usually the layout file. That’s why it works fine when you add a Tailwind class in that file, but not for classes added in a frontend component.

In my tests, I found that if I also import Tailwind in the Vue component, it works correctly, but that results in two Tailwind builds. That’s when I tried adding the option source("../src") to the Tailwind import, and to my surprise, it worked. This leads me to believe that the problem all along was that the correct working directory wasn’t being used; manually specifying it fixes everything.

Again, I’m not sure if this approach is the right one or the most efficient in terms of performance, but it seemed like a simpler solution that doesn’t require changing anything in either Tailwind or Astro. I hope this information helps in finding a better way to resolve this issue.

Thanks for all your work, guys!

[florian-lefebvre]

Hey thanks for commenting! Using source is currently documented as a workaround in withastro/astro#13139 but ideally components should be discovered automatically

[philipp-spiess]

@jesus997 We just released Tailwind CSS v4.0.8 that contains the fix for the issue outlined here. So if you update, the additional the changed source(…) should not be necessary. If you still have issues I'd love to see a repro at https://github.com/tailwindlabs/tailwindcss 🙏

[jesus997]

@philipp-spiess Thank you very much! Now it works correctly without needing to specify source in the import. Tested with Astro + Tailwind + Vue 😃