Tailwind classes aren't generated for new page files

[blakej115]

Astro Info

Astro                    v4.16.6
Node                     v20.18.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When a new page file is created, and I add a Tailwind class to it, ex: text-[123px] the class is not automatically generated. If I go and make any edit to any other file that's already being watched, Tailwind/Astro will suddenly pick up the new page file and start working.

Is this supposed to function this way? I am using WSL Ubuntu on Windows.

What's the expected result?

I expect new files to be recognized immediately and be able to generate Tailwind classes from them, rather than having to edit an unrelated existing file to get the changes to be picked up.

The issue is replicable in Stack Blitz, however, the issue only happens sometimes on some new file creations, which seems to be random. When I tested on my local system (WSL Ubuntu through Windows), the issue seemed to happen every time I created a new page file.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hnqfn3?file=src%2Fpages%2Ffoo-bar.astro

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

Does this also happen in a plain Vite app? I don't think Astro affects how tailwind watches files. Is it also happening specifically on Astro files?

[ematipico]

@blakej115, could you please answer our question?

[bluwy]

It's a bug in Vite: vitejs/vite#18552