Text and fonts

Text utilities set size, weight, font, spacing and alignment. After Preflight text has no styling at all, so these classes appear in every layout.

Size

Size is set with text- classes and a step word:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="text-sm">text-sm — 14px</p>
<p class="text-base">text-base — 16px</p>
<p class="text-xl">text-xl — 20px</p>
<p class="text-3xl">text-3xl — 30px</p>

The lines grow from top to bottom. The steps are xs, sm, base, lg, xl, 2xl and further up to 9xl. Each class also sets a matching line height.

Weight and style

Font family

There are three ready families: font-sans — sans-serif, font-serif — serif, font-mono — monospace. Your own font is added through the theme — see the @theme lesson.

Spacing and alignment

leading- sets the line height, tracking- the letter spacing, and text-left, text-center, text-right the alignment. Size and line height can go together after a slash: text-lg/7 means size lg and a line height of 7 scale steps.

Let us build the text part of the product card:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="w-72">
  <p class="text-xs font-semibold tracking-wide text-indigo-600 uppercase">Audio</p>
  <h2 class="mt-1 text-lg font-semibold text-gray-900">Wireless headphones</h2>
  <p class="mt-2 text-sm/6 text-gray-600">Active noise cancelling and up to 30 hours on a single charge.</p>
  <p class="mt-3 text-2xl font-bold text-gray-900">$79</p>
</div>

A small uppercase category, a large name, a gray description and a prominent price — differences in size, weight and color set the reading order.

Long text

A product name can be too long for the card. truncate cuts text to one line with an ellipsis, and line-clamp-2 keeps two lines:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="w-56 truncate">Wireless headphones with active noise cancelling</p>
<p class="mt-3 w-56 line-clamp-2">Wireless headphones with active noise cancelling and a transparency mode</p>

The first line ends with an ellipsis, the second paragraph stops after two lines.

Common mistake

Mixing up text- for size and for color, and setting two sizes at once:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="text-lg text-2xl">Which size?</p>

The order of classes in the attribute does not matter: the winner is the one that comes later in the generated CSS, not in the markup. An element should have one size class and one color class — text-2xl text-gray-900.