Typeset

1. Create typeset.css

Copy the stylesheet into a typeset.css file next to your main CSS file, then import it:

@import "tailwindcss";
@import "./typeset.css";

2. Add the fonts

Load the fonts from Fontsource's CDN by importing them in your CSS file:

/* globals.css */
@import "https://cdn.jsdelivr.net/fontsource/css/geist:vf@latest/wght.css";
@import "https://cdn.jsdelivr.net/fontsource/css/geist-mono:vf@latest/wght.css";

:root {
  --font-geist: 'Geist Variable', sans-serif;
  --font-geist-mono: 'Geist Mono Variable', monospace;
}

3. Create your custom typeset

/* globals.css */
@import "tailwindcss";
@import "./typeset.css";

.typeset-docs {
  --typeset-font-body: var(--font-geist);
  --typeset-font-heading: var(--font-geist);
  --typeset-font-mono: var(--font-geist-mono);
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.25em;
}

4. Wrap your content

<div class="typeset typeset-docs max-w-[37em]">
	@templ.Raw(content)
</div>

One prompt with your picks baked in. Copy it and paste it into your coding agent.

Read the docs