Styling disappears on second pageload in dev when using Tailwind

[KianNH]

What version of starlight are you using?

0.30.2

What version of astro are you using?

5.0.6

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

When using Tailwind and custom pages using the StarlightPage component, styling will disappear on the second pageload.

Screen.Recording.2024-12-16.at.18.15.19.mov

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-7kjhymwh

Participation

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

[KianNH]

I attempted to reproduce this in a plain Astro project that also uses Tailwind with applyBaseStyles: false, and was unable to.

[delucis]

Hmm, odd, but noting we also got another report from someone about this.

One thing I’ll note is that our customCss configuration option adds the imported style (used for Tailwind in this case) to a virtual module before importing it in a template. Not sure if that’s relevant or not. Also not sure why it would be an issue when using <StarlightPage> but not in a regular page created by Starlight.

[delucis]

I tested a few more combinations to see if I could reproduce in other circumstances but no luck:

• Regular Starlight site without Tailwind — works fine ✅
• Regular Starlight site with Tailwind — works fine ✅
• Page using <StarlightPage> without Tailwind — works fine ✅
• Page using <StarlightPage> with customCSS file — works fine ✅
• Page using <StarlightPage> with Tailwind — broken ❌

So does seem to be linked to Tailwind specifically somehow.

Hunch: this is a dependency graph bug with HMR. The import chain here is:

• import './tailwind.css' in a virtual module Starlight creates based on user config
• import 'virtual:starlight/user-css' in our <Page> component
• import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro" in the user’s page

So it’s a nice combo of places to potentially go wrong across virtual modules and npm module specifiers.

Transferring across to the Astro monorepo as I’m pretty sure it will need fixing there (if not even higher upstream).

[marcosmartini]

Hey @delucis @HiDeoo

Just a heads up: after updating to Astro 5.1.1, I don't experience this anymore.

Cheers!

[sgalcheung]

About issue #2716, Astro 5.1.1 also worked well.