Typography Utilities in Tailwind

Tailwind handles every aspect of typography with utility classes. No typography stylesheet needed — font styling composes the same way as layout.

Font size and weight

Sizes scale from text-xs to text-9xl.

<h1 class="text-4xl font-bold">Page Title</h1>
<h2 class="text-2xl font-semibold">Section Heading</h2>
<p class="text-base font-normal text-gray-600">Body text</p>
<small class="text-sm text-gray-400">Caption</small>

Line height and letter spacing

<p class="leading-relaxed tracking-wide">Readable body paragraph.</p>
<h1 class="leading-tight tracking-tighter">Tight display heading</h1>

Alignment, decoration, transform

<p class="text-center">Centered</p>
<a class="underline hover:no-underline">Link</a>
<span class="uppercase font-medium tracking-widest text-xs">Label</span>
<p class="truncate w-48">Long text gets cut off with ellipsis</p>

Font family

Default Tailwind includes three stacks: font-sans, font-serif, font-mono. Override in tailwind.config.js to use Google Fonts. Apply at body level for global default.