Tailwind CSS Typography Cheatsheet
Complete Tailwind v4 typography utilities reference.
Click any class to copy it to your clipboard.
Font Family
font-sansThe quick brown fox jumps over the lazy dogfont-serifThe quick brown fox jumps over the lazy dogfont-monoThe quick brown fox jumps over the lazy dogFont Size
| Class | Size | Pixels | Line Height | Preview | |
|---|---|---|---|---|---|
| text-xs | 0.75rem | 12px | 1rem (16px) | Aa | |
| text-sm | 0.875rem | 14px | 1.25rem (20px) | Aa | |
| text-base | 1rem | 16px | 1.5rem (24px) | Aa | |
| text-lg | 1.125rem | 18px | 1.75rem (28px) | Aa | |
| text-xl | 1.25rem | 20px | 1.75rem (28px) | Aa | |
| text-2xl | 1.5rem | 24px | 2rem (32px) | Aa | |
| text-3xl | 1.875rem | 30px | 2.25rem (36px) | Aa | |
| text-4xl | 2.25rem | 36px | 2.5rem (40px) | Aa | |
| text-5xl | 3rem | 48px | 1 | Aa | |
| text-6xl | 3.75rem | 60px | 1 | Aa | |
| text-7xl | 4.5rem | 72px | 1 | Aa | |
| text-8xl | 6rem | 96px | 1 | Aa | |
| text-9xl | 8rem | 128px | 1 | Aa |
Font Weight
font-thin(100)font-extralight(200)font-light(300)font-normal(400)font-medium(500)font-semibold(600)font-bold(700)font-extrabold(800)font-black(900)Live Preview:
Font Style
italicfont-style: italic
not-italicfont-style: normal
Letter Spacing
tracking-tighter(-0.05em)tracking-tight(-0.025em)tracking-normal(0em)tracking-wide(0.025em)tracking-wider(0.05em)tracking-widest(0.1em)Line Height
Relative Line Heights
leading-noneline-height: 1
leading-tightline-height: 1.25
leading-snugline-height: 1.375
leading-normalline-height: 1.5
leading-relaxedline-height: 1.625
leading-looseline-height: 2
Fixed Line Heights
leading-30.75rem (12px)
leading-41rem (16px)
leading-51.25rem (20px)
leading-61.5rem (24px)
leading-71.75rem (28px)
leading-82rem (32px)
leading-92.25rem (36px)
leading-102.5rem (40px)
Live Preview:
The quick brown fox jumps over the lazy dog. The quick brown fox.
The quick brown fox jumps over the lazy dog. The quick brown fox.
The quick brown fox jumps over the lazy dog. The quick brown fox.
Text Alignment
text-leftSample text alignment
text-centerSample text alignment
text-rightSample text alignment
text-justifySample text alignment
text-startSample text alignment
text-endSample text alignment
Text Decoration
Decoration Line
underlineoverlineline-throughno-underlineDecoration Style
decoration-soliddecoration-doubledecoration-dotteddecoration-dasheddecoration-wavyDecoration Thickness
decoration-autodecoration-from-fontdecoration-0decoration-1decoration-2decoration-4decoration-8Decoration Colors: Use decoration-{color} utilities like decoration-red-500, decoration-blue-600, etc.
Text Transform
uppercaseSample TextlowercaseSample TextcapitalizeSample Textnormal-caseSample TextText Overflow
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap
text-ellipsistext-overflow: ellipsis
text-cliptext-overflow: clip
Whitespace
whitespace-normalwhite-space: normal
whitespace-nowrapwhite-space: nowrap
whitespace-prewhite-space: pre
whitespace-pre-linewhite-space: pre-line
whitespace-pre-wrapwhite-space: pre-wrap
whitespace-break-spaceswhite-space: break-spaces
Word Break
break-normaloverflow-wrap: normal; word-break: normal
break-wordsoverflow-wrap: break-word
break-allword-break: break-all
break-keepword-break: keep-all
Common Patterns
Blog Post Title
<h1 class="text-4xl font-bold
tracking-tight leading-tight">
Article Title
</h1>Body Text
<p class="text-base font-normal
leading-relaxed text-gray-700">
Body content here...
</p>Navigation Link
<a class="text-sm font-medium
uppercase tracking-wide
hover:underline">
Menu Item
</a>Code Block
<code class="font-mono text-sm
whitespace-pre-wrap">
const x = 1;
</code>Truncated Text
<p class="truncate max-w-xs"> Long text that overflows... </p>
Strikethrough Price
<span class="line-through
text-gray-400 decoration-2">
$99
</span>About Tailwind Typography
Tailwind v4 provides a comprehensive set of typography utilities for controlling font family, size, weight, style, spacing, and more.
For custom values, use arbitrary notation: text-[22px], tracking-[0.03em], leading-[1.8]
Combine with responsive prefixes for adaptive typography: text-base md:text-lg lg:text-xl
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow