Tailwind CSS Font Sizes
Complete Tailwind v4 typography scale reference.
Click any row to copy the class name.
Live Preview
Quick Reference
| Class | Font Size | Pixels | Line Height | |
|---|---|---|---|---|
| text-xs | 0.75rem | 12px | 1.333 | |
| text-sm | 0.875rem | 14px | 1.429 | |
| text-base | 1rem | 16px | 1.5 | |
| text-lg | 1.125rem | 18px | 1.556 | |
| text-xl | 1.25rem | 20px | 1.4 | |
| text-2xl | 1.5rem | 24px | 1.333 | |
| text-3xl | 1.875rem | 30px | 1.2 | |
| text-4xl | 2.25rem | 36px | 1.111 | |
| text-5xl | 3rem | 48px | 1 | |
| text-6xl | 3.75rem | 60px | 1 | |
| text-7xl | 4.5rem | 72px | 1 | |
| text-8xl | 6rem | 96px | 1 | |
| text-9xl | 8rem | 128px | 1 |
Usage Examples
Headings
<h1 class="text-4xl">Page Title</h1> <h2 class="text-2xl">Section</h2> <h3 class="text-xl">Subsection</h3>
Body Text
<p class="text-base">Body text</p> <p class="text-sm">Small text</p> <span class="text-xs">Caption</span>
Responsive
<h1 class="text-2xl md:text-4xl lg:text-5xl"> Responsive Title </h1>
Custom Line Height
<p class="text-lg leading-relaxed"> Custom line height </p>
About Tailwind Font Sizes
Tailwind v4 uses a modular type scale with 13 sizes from text-xs (12px) to text-9xl (128px). Each size includes an optimized line-height for readability.
For custom sizes, use arbitrary values: text-[17px] or text-[1.0625rem]
Override line-height with leading utilities: leading-tight, leading-normal, leading-relaxed
Looking for the full Tailwind font-size utility reference? Tailwind Font Size Reference →
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