Fix Tailwind font-family reset when using Starlight plugin (#1906)

withastro · May 21, 2024 · b079ae1 · b079ae1
1 parent f3b5007
commit b079ae1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/fresh-plums-bow.md b/.changeset/fresh-plums-bow.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight-tailwind': patch
+---
+
+Fixes default `font-family` in non-Starlight pages when using Tailwind plugin
diff --git a/packages/tailwind/__tests__/tailwind.test.ts b/packages/tailwind/__tests__/tailwind.test.ts
@@ -37,6 +37,12 @@ describe('@tailwind base;', async () => {
 			::before, ::after {
 			    --tw-content: ;
 			}
+			html, :host {
+			    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+			}
+			code, kbd, samp, pre {
+			    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+			}
 			:root {
 			    --sl-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 			    --sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -105,6 +111,12 @@ describe('@tailwind base;', async () => {
 			::before, ::after {
 			    --tw-content: ;
 			}
+			html, :host {
+			    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+			}
+			code, kbd, samp, pre {
+			    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+			}
 			:root {
 			    --sl-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 			    --sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

diff --git a/packages/tailwind/index.ts b/packages/tailwind/index.ts
@@ -68,6 +68,9 @@ const StarlightTailwindPlugin = () =>
 					borderColor: theme('borderColor.DEFAULT', 'currentColor'),
 				},
 				'::before, ::after': { '--tw-content': '' },
+				// Keep base font-family styles even in non-Starlight pages.
+				'html, :host': { 'font-family': theme('fontFamily.sans') },
+				'code, kbd, samp, pre': { 'font-family': theme('fontFamily.mono') },
 
 				// Wire up Starlight theme to use Tailwind config.
 				':root': {