Typography & Fonts
Tailwind CSS includes a complete set of typography utilities for managing font sizes, font weights, line heights, text alignment, and text transforms.
1. Font Sizes
| Class | Size / Line Height | Sample Output |
|---|---|---|
text-xs | 0.75rem (12px) | Extra Small Text |
text-sm | 0.875rem (14px) | Small Text |
text-base | 1rem (16px) | Base Text |
text-lg | 1.125rem (18px) | Large Text |
text-xl | 1.25rem (20px) | Extra Large Text |
text-2xl | 1.5rem (24px) | 2X Large Text |
text-3xl | 1.875rem (30px) | 3X Large Heading |
2. Font Weights
font-thin (Weight: 100)
font-light (Weight: 300)
font-normal (Weight: 400)
font-medium (Weight: 500)
font-semibold (Weight: 600)
font-bold (Weight: 700)
font-black (Weight: 900)
3. Text Alignment & Transform
<p className="text-left">Left aligned text</p> <p className="text-center">Center aligned text</p> <p className="text-right">Right aligned text</p> <p className="text-justify">Justified text alignment</p> <p className="uppercase">uppercase text</p> <p className="lowercase">LOWERCASE TEXT</p> <p className="capitalize">capitalize first letters</p>
4. Text Truncation & Line Clamp
Prevent long paragraphs from breaking your UI using truncate or multi-line clamp:
Single Line Truncate (truncate):
This is a very long text string that will automatically truncate with an ellipsis when it overflows its container width.
Multi-Line Clamp (line-clamp-2):
Tailwind CSS line clamp utility allows you to restrict block text to a specified number of lines. After two lines, any additional content will be automatically hidden with an ellipsis.
Next Up
Master margins, paddings, space-between, and negative spacing in Tailwind.
Next Lesson: Spacing (Margin & Padding) →
