diff options
| author | Chris Swithinbank | 2024-05-21 12:15:37 +0200 |
|---|---|---|
| committer | GitHub | 2024-05-21 12:15:37 +0200 |
| commit | b079ae114c49bf0570a142b94997bcc0828c47e0 (patch) | |
| tree | d07d8a70e75e127ffdd9c84ecb2d66e3f994b9fe | |
| parent | f3b5007d8a04ab10328819416fd81b846837a89f (diff) | |
| download | IT.starlight-b079ae114c49bf0570a142b94997bcc0828c47e0.tar.gz IT.starlight-b079ae114c49bf0570a142b94997bcc0828c47e0.tar.bz2 IT.starlight-b079ae114c49bf0570a142b94997bcc0828c47e0.zip | |
Fix Tailwind `font-family` reset when using Starlight plugin (#1906)
| -rw-r--r-- | .changeset/fresh-plums-bow.md | 5 | ||||
| -rw-r--r-- | packages/tailwind/__tests__/tailwind.test.ts | 12 | ||||
| -rw-r--r-- | packages/tailwind/index.ts | 3 |
3 files changed, 20 insertions, 0 deletions
diff --git a/.changeset/fresh-plums-bow.md b/.changeset/fresh-plums-bow.md new file mode 100644 index 00000000..c6e28eb0 --- /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 f00ce1f5..ef3c260b 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 fc11b9eb..8253e70a 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': { |