Svelte's Tailwindcss styles don't hot reload

[kelvin-zhao]

What version of astro are you using?

1.0.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?

Mac

Describe the Bug

Seems that as long as my Svelte component has a client directive, the tailwindcss inside doesn't hot reload, instead you have to close and restart npm for it to read/implement the tailwindcss styles added.

Do see the stackblitz link and try adding different color text to the h1. It doesn't register until you restart npm.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-bk6kww?file=src/components/Card.svelte

Participation

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

[bluwy]

Looks like similar to #4217, this will be fixed by vitejs/vite#9759.

[kelvin-zhao]

@bluwy do you know if there's any estimate on when this fix will be pulled in? Considering to switch away from Svelte for my new project if this might take some time. 🙏🏻 Thanks in advance~

[bluwy]

The next Vite release will be a 3.1 beta, and it usually takes one or two weeks before stabilizing (hoping to push this one faster). So it might take some time unfortunately. Once Vite 3.1 beta comes out you can use overrides to change to a specific version though. I'll close this one for now as the work has been done for the issue.

[bluwy]

Vite 3.1-beta.0 has been released which you can try out!