Typography

Readable text by default

Typography utilities cover size (text-sm to text-9xl, each with a matching line height), weight (font-medium, font-bold), line height (leading-relaxed), letter spacing (tracking-tight), alignment (text-center), transform (uppercase) and overflow (truncate, line-clamp-3). text-lg/7 sets the size and line height together. text-balance and text-pretty improve line wrapping in headings and paragraphs. For long-form content, the official typography plugin's prose class styles whole articles.

An article header

Common text utilities.

<header class="max-w-2xl">
  <p class="text-sm font-semibold uppercase tracking-wide text-cyan-700">Guide</p>
  <h1 class="mt-2 text-4xl font-bold tracking-tight text-balance text-gray-900">
    Building layouts with Tailwind CSS
  </h1>
  <p class="mt-4 text-lg/8 text-gray-600 line-clamp-3">A practical introduction...</p>
</header>

Limit line length

max-w-prose or max-w-2xl keeps paragraphs readable at roughly 60 to 75 characters per line.

Quick check: Which utility limits text to three lines with an ellipsis?

• truncate-3
• line-clamp-3
• text-3
• leading-3