On this page

Typography and Text

10 min read TextCh. 3 — Visual styles

Typography and Text

Typography is one of the areas where Tailwind's utility model is most satisfying. Instead of remembering which CSS properties control each typographic aspect, every property maps directly to a clearly named utility class.

Font size and line height

Tailwind's font-size utilities set both font-size and a sensible line-height together. You rarely need to override line height separately.

<p class="text-xs">12px / 16px line-height</p>
<p class="text-sm">14px / 20px line-height</p>
<p class="text-base">16px / 24px line-height</p>
<p class="text-lg">18px / 28px line-height</p>
<p class="text-xl">20px / 28px line-height</p>
<p class="text-2xl">24px / 32px line-height</p>
<p class="text-3xl">30px / 36px line-height</p>
<p class="text-4xl">36px / 40px line-height</p>
<p class="text-5xl">48px / 1 (unitless line-height)</p>
<p class="text-6xl">60px / 1</p>
<p class="text-7xl">72px / 1</p>
<p class="text-8xl">96px / 1</p>
<p class="text-9xl">128px / 1</p>

Arbitrary sizes are fully supported:

<p class="text-[17px]">Exactly 17px</p>
<p class="text-[clamp(1rem,2.5vw,3rem)]">Fluid typography with clamp</p>

Font weight

<p class="font-thin">Thin (100)</p>
<p class="font-extralight">Extra Light (200)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extra Bold (800)</p>
<p class="font-black">Black (900)</p>

In practice, most UIs use font-normal, font-medium, font-semibold, and font-bold.

Line height

When you need to override the default line height that comes bundled with font-size utilities:

<p class="text-base leading-none">Line height: 1</p>
<p class="text-base leading-tight">Line height: 1.25</p>
<p class="text-base leading-snug">Line height: 1.375</p>
<p class="text-base leading-normal">Line height: 1.5</p>
<p class="text-base leading-relaxed">Line height: 1.625</p>
<p class="text-base leading-loose">Line height: 2</p>

<!-- Arbitrary -->
<p class="text-base leading-[1.8]">Custom 1.8 line height</p>

Letter spacing (tracking)

<p class="tracking-tighter">Tighter: -0.05em</p>
<p class="tracking-tight">Tight: -0.025em</p>
<p class="tracking-normal">Normal: 0em</p>
<p class="tracking-wide">Wide: 0.025em</p>
<p class="tracking-wider">Wider: 0.05em</p>
<p class="tracking-widest">Widest: 0.1em — great for labels and caps</p>

A common UI pattern for section labels:

<p class="text-xs font-semibold uppercase tracking-widest text-gray-400">
  Section label
</p>

Font family

Tailwind's default three font families map to system font stacks:

<p class="font-sans">System UI / sans-serif (default)</p>
<p class="font-serif">Georgia / serif</p>
<p class="font-mono">Courier / monospace</p>

To use a web font, load it in your HTML <head> and define it in @theme:

<!-- In <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
  rel="stylesheet"
/>
/* In your CSS */
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Cal Sans", "Inter", sans-serif;
  --font-mono: "Fira Code", ui-monospace, "Courier New", monospace;
}

Now font-sans uses Inter, and font-display is available for headings.

Text alignment and decoration

<!-- Alignment -->
<p class="text-left">Left (default)</p>
<p class="text-center">Centered</p>
<p class="text-right">Right</p>
<p class="text-justify">Justified (avoid for body text — hard to read)</p>

<!-- Decoration -->
<p class="underline">Underlined</p>
<p class="line-through">Strikethrough</p>
<p class="no-underline">Remove underline (for links)</p>

<!-- Decoration color and style -->
<p class="underline decoration-indigo-500 decoration-2">Custom decoration</p>
<p class="underline decoration-wavy decoration-rose-500">Wavy underline</p>

<!-- Transform -->
<p class="uppercase">ALL CAPS</p>
<p class="lowercase">all lowercase</p>
<p class="capitalize">First Letter Uppercase</p>
<p class="normal-case">Reset transformation</p>

Text overflow

<!-- Truncate with ellipsis (single line) -->
<p class="truncate max-w-xs">This very long text will be cut off with an ellipsis when it overflows</p>

<!-- Clamp to N lines (multi-line ellipsis) -->
<p class="line-clamp-2">
  This text will show a maximum of two lines and then show an ellipsis.
  Everything beyond the second line will be hidden.
</p>

<p class="line-clamp-3">Three lines max</p>

<!-- Prevent wrapping -->
<p class="whitespace-nowrap">This text will not wrap to a new line</p>

<!-- Allow long words to break -->
<p class="break-words">LongUnbreakableWordThatWouldOverflowItsContainer</p>
<p class="break-all">Every character can break onto a new line</p>

Text wrap control (v4)

<!-- Balance short headings so no orphaned last word -->
<h1 class="text-balance text-4xl font-bold">A heading that wraps beautifully</h1>

<!-- Pretty: browser-optimized wrapping for body text -->
<p class="text-pretty leading-relaxed">Body copy with typography-aware line breaks.</p>

The typography plugin

For rendering HTML content you do not fully control (blog posts, documentation, markdown output), install the official typography plugin:

npm install -D @tailwindcss/typography
/* In your CSS */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

Apply it with the prose class:

<!-- All nested elements get beautiful typographic defaults -->
<div class="prose prose-lg prose-indigo max-w-none">
  <h1>Rendered from Markdown</h1>
  <p>Body text with <strong>bold</strong> and <em>italic</em> support.</p>
  <ul>
    <li>Properly styled list items</li>
    <li>With correct spacing</li>
  </ul>
  <pre><code>// Code blocks too</code></pre>
</div>

Modifiers include prose-sm, prose-lg, prose-xl for size, and color modifiers like prose-indigo, prose-gray, prose-slate.

Custom font sizes with @theme

@import "tailwindcss";

@theme {
  /* New size — generates text-2xs -->
  --text-2xs: 0.625rem;
  --text-2xs--line-height: 1rem;

  /* Display size for hero headings */
  --text-display: 4.5rem;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.02em;
}

Practice

  1. Build a blog post header: category label (uppercase, tracked, indigo), a large text-balance headline, a lead paragraph (text-xl font-light), and an author byline.
  2. Create a code snippet block with a font-mono container, text-sm, bg-gray-950 text-gray-100, and a colored bar for the language label.
  3. Add the @tailwindcss/typography plugin and wrap sample markdown-rendered HTML with prose prose-indigo. Observe how h2, p, ul, code, and blockquote elements are styled automatically.
Use text-balance on headings for better line breaks
text-balance (CSS text-wrap: balance) distributes words evenly across lines so no heading ends with a single word on the last line. Supported in all modern browsers. Apply it consistently to all h1, h2, and h3 elements.
The @tailwindcss/typography plugin adds a prose class
Install @tailwindcss/typography to get the prose class. Wrap any HTML rich text content (blog posts, documentation, markdown-rendered content) with class='prose prose-lg prose-indigo' and Tailwind applies beautiful typographic defaults to all nested elements automatically.
html
<!-- Complete typography showcase: sizes, weights, styles, and spacing -->
<article class="max-w-2xl mx-auto px-4 py-8 space-y-8">

  <!-- Display heading -->
  <div>
    <p class="text-xs font-semibold uppercase tracking-widest text-indigo-500 mb-2">
      Category
    </p>
    <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 leading-tight tracking-tight">
      The Complete Guide to Tailwind Typography
    </h1>
    <p class="mt-4 text-xl text-gray-500 leading-relaxed font-light">
      Mastering text utilities gives your UI a professional, polished feel.
    </p>
  </div>

  <!-- Author line -->
  <div class="flex items-center gap-3 py-4 border-y border-gray-100">
    <img src="/avatar.jpg" alt="Author" class="w-10 h-10 rounded-full object-cover" />
    <div>
      <p class="text-sm font-semibold text-gray-900">David Morales</p>
      <p class="text-xs text-gray-400">April 2, 2026 · 8 min read</p>
    </div>
  </div>

  <!-- Body text -->
  <div class="space-y-4 text-base text-gray-700 leading-relaxed">
    <p>
      Typography is the backbone of any written interface. Tailwind's text utilities
      cover every aspect of typography — size, weight, line height, letter spacing,
      alignment, decoration, and more.
    </p>
    <p>
      The best UIs use a <strong class="font-semibold text-gray-900">limited typographic scale</strong>:
      one or two font families, three to five sizes, and two to three weights.
      Restraint in typography creates clarity, not monotony.
    </p>
  </div>

  <!-- Callout block -->
  <blockquote class="border-l-4 border-indigo-400 pl-6 py-2 bg-indigo-50 rounded-r-xl">
    <p class="text-base italic text-indigo-900 font-medium">
      "Good typography is invisible. Bad typography is everywhere."
    </p>
    <footer class="mt-2 text-sm text-indigo-600">— Beatrice Warde</footer>
  </blockquote>

  <!-- Code inline and preformatted -->
  <div class="space-y-2 text-base text-gray-700 leading-relaxed">
    <p>
      Use <code class="bg-gray-100 text-indigo-700 font-mono text-sm px-1.5 py-0.5 rounded">
      text-balance
      </code> on headings to prevent awkward line breaks.
    </p>
  </div>

</article>