From b079ae114c49bf0570a142b94997bcc0828c47e0 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Tue, 21 May 2024 12:15:37 +0200 Subject: [PATCH] Fix Tailwind `font-family` reset when using Starlight plugin (#1906) --- .changeset/fresh-plums-bow.md | 5 +++++ packages/tailwind/__tests__/tailwind.test.ts | 12 ++++++++++++ packages/tailwind/index.ts | 3 +++ 3 files changed, 20 insertions(+) create mode 100644 .changeset/fresh-plums-bow.md diff --git a/.changeset/fresh-plums-bow.md b/.changeset/fresh-plums-bow.md new file mode 100644 index 00000000000..c6e28eb0fac --- /dev/null +++ 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 index f00ce1f59cd..ef3c260b48f 100644 --- 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 index fc11b9eb2af..8253e70a9d7 100644 --- 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': {