Document Tailwind Play CDN setup for Basecoat theme colors

site/src/components/StyleHead.astro

@@ -24,28 +24,28 @@ const styleUrls = {
 
 <style is:inline>
   @font-face {
-    font-family: "Geist";
+    font-family: "Geist Sans";
     src: url("/assets/fonts/geist/geist-sans-latin-400-normal.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
-    font-family: "Geist";
+    font-family: "Geist Sans";
     src: url("/assets/fonts/geist/geist-sans-latin-500-normal.woff2") format("woff2");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
-    font-family: "Geist";
+    font-family: "Geist Sans";
     src: url("/assets/fonts/geist/geist-sans-latin-600-normal.woff2") format("woff2");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
-    font-family: "Geist";
+    font-family: "Geist Sans";
     src: url("/assets/fonts/geist/geist-sans-latin-700-normal.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;

site/src/docs/customization.mdx

@@ -45,12 +45,12 @@ Learn more in the [shadcn/ui theming docs](https://ui.shadcn.com/docs/theming).
 
 ## Fonts
 
-Basecoat does not ship web font files by default. Its font tokens prefer [Geist](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
+Basecoat does not ship web font files by default. Its font tokens prefer [Geist Sans](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
 
 Install the fonts with Fontsource:
 
 ```bash
-npm install @fontsource/geist @fontsource/geist-mono
+npm install @fontsource/geist-sans @fontsource/geist-mono
 ```
 
 Then import the font files. Basecoat's default font tokens already reference Geist with full system fallbacks:
@@ -58,10 +58,10 @@ Then import the font files. Basecoat's default font tokens already reference Gei
 ```css
 @import "tailwindcss";
 @import "basecoat-css/sera";
-@import "@fontsource/geist/400.css";
-@import "@fontsource/geist/500.css";
-@import "@fontsource/geist/600.css";
-@import "@fontsource/geist/700.css";
+@import "@fontsource/geist-sans/400.css";
+@import "@fontsource/geist-sans/500.css";
+@import "@fontsource/geist-sans/600.css";
+@import "@fontsource/geist-sans/700.css";
 @import "@fontsource/geist-mono/400.css";
 @import "@fontsource/geist-mono/500.css";
 @import "@fontsource/geist-mono/600.css";

site/src/docs/installation.mdx

@@ -70,6 +70,32 @@ Or load the Basecoat runtime once, then only the component scripts you use.
 | `dist/js/basecoat.min.js` | Runtime only. Load once before individual component scripts. |
 | `dist/js/{component}.min.js` | Individual JavaScript component file. |
 
+### Tailwind utilities with the CDN
+
+The CDN stylesheets only include the utilities Basecoat uses, so classes like `bg-primary` or `text-muted-foreground` are not available. If you add the [Tailwind Play CDN](https://tailwindcss.com/docs/installation/play-cdn) for utilities, map Basecoat's theme tokens to Tailwind colors and restore the border color after Tailwind's preflight. Load this after the Basecoat stylesheet.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+<style type="text/tailwindcss">
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-border: var(--border);
+  }
+  @layer base {
+    *, ::before, ::after { border-color: var(--border); }
+  }
+</style>
+```
+
+Add any other tokens you use the same way, for example `--color-destructive: var(--destructive);`. The Play CDN is meant for prototypes. For production, use the [Tailwind CLI with a bundle file](#npm) instead.
+
 ## NPM
 
 <Steps>

src/css/base/base.css

@@ -84,7 +84,7 @@
 }
 
 @theme {
-  --font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);