BUG: TailwindCSS + Svelte: Hot Reload shows erratic behavior

[SMEETT]

What version of astro are you using?

v1.1.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Win 11 Enterprise (10.0.22000 Build 22000)

Describe the Bug

Tailwind Classes added to HTML-Elements are being ignored or are applied erratically (once Svelte is integrated)

Here are a few things I observed (I used an H1 with the class text-*xl in both, a Svelte component and .astro page):

1. When changing text-*xl and going up in sizes, it often works for text-2xl, text-3xl etc. and up to text-5xl, then it stops working and jumps back to no styling (even though we now have something like text-6xl applied.)
2. Problem seems to be related to the Svelte integration. When Svelte is integrated .astro files show an erratic behavior too.
3. Restarting the dev-server "fixes" the problem (e.g classes are applied as they should).
4. When a class was added successfully once (by restarting the dev-server) it seems to work after that.

Thanks for reading!

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-xtuihr?file=src%2Fpages%2Findex.astro,src%2FTest.svelte&on=stackblitz

Participation

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