Typography

/* v4 — in your CSS */
@theme {
  --font-display: 'Cal Sans', sans-serif;
}

<!-- Usage -->
<h1 class="font-display">Heading</h1>

<p class="font-variant-numeric: tabular-nums">
<!-- Tailwind classes: -->
<p class="tabular-nums">1,234,567</p>
<p class="oldstyle-nums">1234</p>
<p class="lining-nums">1234</p>
<p class="proportional-nums">1234</p>
<p class="slashed-zero">0</p>
<p class="diagonal-fractions">1/2</p>
<p class="stacked-fractions">1/2</p>
<p class="ordinal">1st 2nd 3rd</p>

<h1 class="text-4xl font-bold leading-tight">
  Tight heading for large display text
</h1>
<p class="text-base leading-relaxed">
  Body copy reads better with relaxed line height.
</p>

<!-- Micro-label pattern: small, uppercase, spaced -->
<span class="text-xs font-semibold uppercase tracking-widest text-gray-500">
  Category
</span>

<p class="text-slate-900">Dark text</p>
<p class="text-slate-500">Muted text</p>
<p class="text-blue-600">Accent text</p>
<p class="text-[#ff6b35]">Arbitrary hex</p>
<p class="text-white/75">White at 75% opacity</p>

<a class="underline decoration-blue-500">Link</a>
<a class="underline decoration-current">Link</a>
<a class="underline decoration-[#ff6b35]">Link</a>

<a class="underline underline-offset-4 decoration-2 decoration-blue-500 hover:decoration-blue-700">
  Styled link
</a>

<p class="truncate max-w-xs">Long text that will be cut off with an ellipsis...</p>

<p class="indent-8">First line indented by 2rem</p>
<p class="indent-[40px]">Arbitrary indent</p>

<ul class="list-[url(/bullet.png)]">...</ul>

<span class="before:content-['*'] before:text-red-500 before:mr-1">Required</span>
<blockquote class="before:content-['\201C'] after:content-['\201D']">Quote</blockquote>
<a class="after:content-['_↗']" href="https://example.com">External</a>

<article class="prose lg:prose-xl max-w-none">
  <h1>Heading</h1>
  <p>Content...</p>
</article>