Typography Utilities

Typography in Tailwind splits into several independent utility groups — size, weight, line height, alignment — that you combine rather than reaching for one big "font" shorthand.

Font size and weight

<h1 class="text-3xl font-bold text-slate-900">Dashboard</h1>
<p class="text-sm font-normal text-slate-500">Last updated 5 minutes ago</p>

Font sizes use named steps (text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, and up) rather than raw pixel or rem values. This matters for the same reason the spacing scale does: a handful of consistent sizes reused across a whole site reads as more deliberate than a dozen near-identical sizes that crept in one component at a time. Each size step also sets a sensible default line-height alongside the font-size, so text doesn't feel cramped or overly loose by default.

Font weight utilities (font-light, font-normal, font-medium, font-semibold, font-bold) map to the numeric font-weight values you already know from CSS (300, 400, 500, 600, 700), just named instead of numbered.

Line height and letter spacing

<p class="text-base leading-relaxed tracking-wide">
  Longer paragraphs often read better with a bit more line height and letter spacing.
</p>

leading-* controls line-height (leading-tight, leading-normal, leading-relaxed, leading-loose), and tracking-* controls letter-spacing (tracking-tight through tracking-wide). Both default to a value tuned per font-size, but overriding them independently is common for body copy versus large display headings, which usually want tighter line-height.

Alignment, transform, and decoration

<p class="text-center uppercase tracking-widest text-slate-500">Featured</p>
<a href="#" class="underline decoration-blue-500 decoration-2 underline-offset-4">Read more</a>

text-center / text-left / text-right set text-align. uppercase, lowercase, and capitalize handle text-transform. Underline styling is broken into its own set of utilities — underline, decoration-{color}, decoration-{width}, and underline-offset-* — so a link's underline color and thickness can differ from its text color without any extra markup.

Truncating text

<p class="max-w-xs truncate">This is a long file name that needs to fit in a narrow column.txt</p>

<p class="line-clamp-3">
  A longer piece of body text that should be cut off after exactly three lines,
  with an ellipsis added automatically, regardless of how much text is provided...
</p>

truncate combines overflow: hidden, text-overflow: ellipsis, and white-space: nowrap into a single class — cutting a long string to one line with a trailing … is a three-property combination in plain CSS, but a one-word utility here. line-clamp-3 does the multi-line equivalent, useful for card previews and search results where you want a consistent height regardless of how long the underlying content actually is.

Composing these small groups — size, weight, line-height, alignment, decoration — instead of one monolithic "typography" class is what lets you override just one aspect (say, weight) without having to restate everything else about how the text looks.