In a project with Tailwind and Starlight integrated, the fonts in the non-starlight pages get broken

[filblue]

What version of starlight are you using?

0.21.2

What version of astro are you using?

4.5.8

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

1. In an Astro project with Tailwind integration
2. Add Starlight integration following steps in https://starlight.astro.build/guides/css-and-tailwind/#tailwind-css

Actual: As soon as starlightPlugin() is included in tailwind.config.mjs, the fonts in the "normal" astro pages (outside of content/docs) gets broken, renders as Times

Expected: Both Starlight-based documentation part of the website and normal astro pages respect fontFamily from Tailwind theme.

Related to https://github.com/withastro/starlight/issues/746

Video demo: https://youtu.be/HGvO4Du6ta4

Link to Minimal Reproducible Example

1. Project created with --template starlight/tailwind, custom page added later: https://stackblitz.com/edit/github-axfwam?file=src%2Fpages%2Fhello.astro

2. Project created with --template with-tailwindcss, starlight integration added later: https://stackblitz.com/edit/github-srxkqp?file=src%2Fpages%2Findex.astro

Participation

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

[Eveeifyeve]

Okay i can see it something to do with the tailwind starlight plugin changing the font to times in the page directory. Maybe a recommended fix is to just apply to content directory.

[Eveeifyeve]

I would say try to apply with a class --sl-font just in the content directory.

[filblue]

try to apply with a class --sl-font just in the content directory

Could you please advise how specifically do I do that? Thank you!

[delucis]

Thanks for the issue @filblue — I just opened #1906 which should fix it.