Typography

Installation

Usage

Apply type styles with text-* utility classes. Each class carries the full style — size, line-height, weight and tracking — on its own, and works on any element. This is the recommended approach.

<h1 className="text-heading-xl">Page title</h1>
<p className="text-lead">Intro paragraph under the title.</p>
<p className="text-body">Body copy for the page.</p>
<td className="text-caption">PARTITION</td>
<span className="text-body tabular-nums">1,284,905</span>

Type Scale

Every style is a single text-* utility. Compose freely with color, alignment, and other utilities.

Line-heights use Tailwind's leading scale — leading-tight (1.25), leading-snug (1.375), leading-normal (1.5) — so they read as intentional steps, not magic numbers.

Size suffixes step relative to text-body, the 14px anchor — they do not name the Tailwind rung underneath, so text-body-sm is built on the xs rung and text-body-lg on base. Body sits at 14px because this is dense application UI rather than long-form prose, and that single choice is what offsets the two scales. text-lead stays a role rather than a size step: reach for it on a lede under a title, and for text-body-lg when you want body copy one notch roomier.

Both overline rungs uppercase in CSS rather than in the string, so your source copy and the accessible name stay in sentence case. They are the eyebrow half of a label-over-value row; for the value half, compose font-mono onto a size (font-mono text-body) — monospace is a family, not a step on this scale.

Each token bundles the type identity — size, line-height and tracking. Weight and color stay composable: for emphasis use text-body font-medium, and for muted text text-body text-subtle, rather than dedicated tokens. For a raw size with no weight or tracking, use Tailwind's own scale (text-xs … text-5xl), including text-2xs (10px) for dense tables and meta rows. For aligned numeric columns, compose tabular-nums onto any text style (e.g. text-body tabular-nums).

Other Elements

Structural and inline elements that pair with the type scale.

Choosing the Right Approach

1. Any text style → apply the matching text-* utility to your element (recommended)
2. Raw size only, no weight or tracking → Tailwind's text-xs…text-5xl (or text-2xs for 10px)
3. Numerical data → your text style + tabular-nums for aligned figures (e.g. text-body tabular-nums)
4. Muted / secondary text → text-body text-subtle
5. Existing code using the deprecated <Heading> or <Text> → keeps working; migrate to the utilities

In Context

Semantic HTML elements styled with the text-* utilities, composed into a realistic document.

Deprecated