Typography

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Text utilities set every common property of type: family, size, weight, spacing, colour, decoration, and wrapping. Values come from the --font-, --text-, and --font-weight-* theme namespaces, so text-lg, font-semibold, and font-sans all exist only because the theme defines them. The full per-utility reference starts at Font Family.

Font family, size, weight, and style

<p class="font-sans">System UI sans stack</p>
<p class="font-serif">Serif stack</p>
<code class="font-mono">Monospace stack</code>

<!-- size utilities pair a font-size with a sensible line-height -->
<p class="text-xs">12px</p>
<p class="text-base">16px (default)</p>
<h1 class="text-4xl">36px</h1>
<h1 class="text-6xl/tight">override the paired line-height inline</h1>

<!-- weight, style, smoothing -->
<p class="font-thin">100</p>
<p class="font-normal">400</p>
<p class="font-bold">700</p>
<p class="font-black">900</p>
<em class="not-italic">reset italic</em>
<p class="antialiased">smoother rendering on macOS/iOS</p>

<!-- width axis (variable fonts) and numeric variants -->
<p class="font-stretch-condensed">condensed</p>
<table class="tabular-nums">columns of figures line up</table>
<p class="slashed-zero oldstyle-nums">0 1 2 3</p>

text-* sizes run text-xs through text-9xl; each carries a default line-height you can override with the text-lg/7 slash syntax. See Font Size and Font Weight.

Spacing and flow

<h2 class="tracking-tight">letter-spacing: -0.025em</h2>
<p class="leading-relaxed">line-height: 1.625</p>

<!-- clamp to N lines with an ellipsis -->
<p class="line-clamp-3">Long copy truncated to three lines&#8230;</p>

<!-- alignment, indent, vertical-align -->
<p class="text-center">centered</p>
<p class="text-justify">justified</p>
<p class="text-start indent-8">first-line indent, direction-aware</p>
<span class="align-middle">baseline nudge</span>

<!-- whitespace, wrapping, hyphenation -->
<pre class="whitespace-pre-wrap">keeps newlines, still wraps</pre>
<p class="text-balance">headline wrapped for even line lengths</p>
<p class="text-pretty">body copy avoiding orphans</p>
<p class="break-words hyphens-auto">verylongunbreakablestring&#8230;</p>

See Letter Spacing, Line Height, and Line Clamp.

Colour and decoration

<p class="text-sky-700">colour from the palette</p>
<p class="text-slate-900/70">70% opacity via the / modifier</p>

<a class="underline decoration-sky-500 decoration-2 decoration-wavy underline-offset-4">link</a>
<s class="line-through">struck</s>
<span class="no-underline">removed</span>

<p class="uppercase">SHOUTING</p>
<p class="capitalize">title case each word</p>

<!-- single-line overflow -->
<div class="w-40 truncate">clipped with an ellipsis</div>
<div class="w-40 overflow-hidden text-ellipsis">same, spelled out</div>

See Text Color and Text Decoration.

Lists

<ul class="list-disc list-inside marker:text-sky-500">
  <li>bulleted, marker recoloured</li>
</ul>
<ol class="list-decimal list-outside pl-5">
  <li>numbered</li>
</ol>
<ul class="list-image-[url(/check.svg)]">
  <li>custom bullet image</li>
</ul>

See List Style Type.

The official plugins

Two first-party plugins cover the gaps utilities leave. In v4 you register a plugin from CSS with @plugin:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@tailwindcss/typography adds the prose classes for styling HTML you do not control — rendered Markdown, CMS output — in one shot:

<article class="prose prose-lg dark:prose-invert prose-headings:font-semibold prose-a:text-sky-600">
  <!-- raw <h2>, <p>, <ul>, <blockquote>, <pre> from a Markdown renderer -->
</article>

@tailwindcss/forms resets input, select, textarea, checkboxes, and radios to a consistent, utility-friendly baseline so rounded, border-gray-300, and focus:ring behave the same across browsers.

Related pages