Typography: Size, Weight, Leading, Tracking

Controlling Text Appearance

Tailwind ships a rich set of typographic utilities. Combine them to create a clear visual hierarchy without writing a single line of custom CSS.

Font Size

The text-{size} scale goes from text-xs (0.75 rem) through text-9xl (8 rem). Each step also sets a sensible line-height by default.

Font Weight

• font-thin (100), font-light (300), font-normal (400).
• font-medium (500), font-semibold (600), font-bold (700).
• font-extrabold (800), font-black (900).

Line Height and Letter Spacing

• leading-none (1), leading-tight (1.25), leading-normal (1.5), leading-loose (2).
• tracking-tight (-0.025em), tracking-normal (0), tracking-wide (0.025em), tracking-widest (0.1em).

<h1 class="text-5xl font-black tracking-tight leading-none text-slate-900">
  Build faster.
</h1>
<p class="mt-4 text-lg font-normal leading-relaxed text-slate-600">
  Tailwind utilities give you full control over every typographic detail.
</p>

Other Text Utilities

• uppercase, lowercase, capitalize, normal-case — text transform.
• text-left, text-center, text-right, text-justify — alignment.
• truncate — ellipsis on overflow.
• line-clamp-{n} — clamp to N lines with ellipsis.
• underline, line-through, no-underline — decoration.