Typography and Text Utilities

Almost every interface is mostly text, which makes the type utilities the ones you will type most often. This chapter of the Tailwind CSS for Beginners series walks through the built-in type scale, families and weights, line height and letter spacing, plus the practical tricks for truncation and multi-line clamping. Underneath, everything is ordinary CSS such as font-size and line-height, so the ideas in CSS Typography transfer directly.

The type scale

Tailwind ships a scale from text-xs to text-9xl, and each step sets the font size together with a sensible line height:

Because the pair travels together you never get cramped headings by accident. When you need a different rhythm, override one half explicitly: text-lg leading-7 or text-4xl leading-none. The size classes also double as line-height controllers — leading-6 means exactly 1.5rem. Sizes also stack with breakpoints, so text-2xl md:text-4xl is how headlines grow on larger screens without you writing a media query; you will use that constantly once Responsive Design with Breakpoints arrives.

Families, weights and styles

Three families are configured by default — font-sans, font-serif and font-mono — and weights run from font-thin (100) to font-black (900):

<h2 class="font-serif text-4xl font-bold text-slate-900">Chapter One</h2>
<p class="font-sans text-base text-slate-600">A neutral sans paragraph under the heading.</p>
<code class="font-mono text-sm font-medium">npm run build</code>

Expected output:

A serif headline in strong weight, followed by an even grey sans
paragraph, with a monospace command line sitting below in a slightly
smaller, medium-weight size.

Swap a family for good by defining --font-body in @theme; the matching font-body utility appears immediately, in exactly the same way colours do.

Aligning, colouring and decorating text

These utilities are one-to-one with the CSS you already know, which is the quiet advantage of the whole framework: once the property makes sense, the class name follows. Nothing here needs a custom rule in a stylesheet, and nothing conflicts with the class beside it.

• Alignment — text-left, text-center, text-right and text-justify.
• Colour and decoration — text-rose-600, underline, line-through, no-underline, plus decoration-dashed and underline-offset-4.
• Transforms — uppercase, lowercase, capitalize and normal-case.
• Emphasis — italic, not-italic, antialiased and tabular-nums for numbers that must line up.

Lists and markers

Feature ticks, step instructions and link menus all lean on list utilities:

<ul class="list-disc pl-5 text-slate-700 marker:text-indigo-600">
  <li class="py-1">Design tokens</li>
  <li class="py-1">Responsive type</li>
</ul>
<ol class="list-decimal pl-5 font-medium text-slate-900">
  <li class="py-1">Install the packages</li>
  <li class="py-1">Compile the CSS</li>
</ol>

Expected output:

A bulleted list with indigo dots lined up beside each item, then a
numbered list in darker, heavier text, with even space between the
items.

Preflight strips list styles from <ul> and <ol>, so bullets never appear unless you ask with list-disc or list-decimal. The marker: variant styles the bullet itself, and list-none with gap-2 is the standard recipe for a vertical link menu.

Spacing between letters and lines

tracking- adjusts letter spacing and leading- adjusts line height, with named steps such as tracking-wide, tracking-tight, leading-tight and leading-relaxed. Wide tracking on small uppercase labels improves legibility, while tight tracking on large headings gives them a modern, compact feel. For longer text, combine max-w-prose with leading-7 so lines stay near sixty-five characters — the measure rule from plain CSS still holds.

Two related utilities earn a place in the same conversation. break-words and break-all decide what happens when a long unbroken token meets a narrow column, and whitespace-nowrap refuses to wrap at all, which is perfect for badges and dangerous for paragraphs. The same careful thinking applies to text-balance, which evens out the ragged edge of a heading, and text-wrap-pretty, which tidies the last lines of a paragraph.

Truncation and clamping

Two everyday problems have short utility answers. Single-line truncation needs four classes at most:

<p class="truncate max-w-xs text-sm text-slate-700">
  This title is deliberately far too long for the narrow column it sits in.
</p>

<p class="line-clamp-2 max-w-xs text-sm text-slate-700">
  A longer notice that will stop after two lines and reveal an ellipsis instead of pushing the card taller than its neighbours.
</p>

Expected output:

The first line is cut at the column edge and ends with "…". The
second paragraph shows exactly two lines of text, then stops with
"…" while the card keeps a consistent height.

In v3, line-clamp-2 needed a plugin; v4 builds it in around the standard -webkit-line-clamp properties.

Common mistakes

• Fighting the paired line height — overriding font-size alone with an arbitrary value drops the line height Tailwind bundled with it.
• Justified body text — text-justify creates rivers on the web; left-align copy instead.
• Too many sizes — using eight different text- steps in one layout reads as noise; three or four is plenty.
• Forgetting semantic headings — Tailwind sizes text but cannot decide that something is an <h2>; keep structure from Semantic HTML5 Layout and style it afterwards.
• Small, pale text — text-xs text-slate-400 is a contrast failure waiting to happen.

Practice checklist

1. Build a small article: title, lead paragraph and body, using no more than four text- steps.
2. Give the title tracking-tight and leading-none, then compare it with the defaults.
3. Apply truncate to a long heading inside a fixed-width box and watch the ellipsis appear.
4. Set a paragraph to max-w-prose leading-7 and check the line length in your browser.

Type sits on a grid of white space you control next — Spacing: Margin and Padding.