Font size, weight, alignment, and text transformation utilities for precise typography control.
A consistent type scale from extra small to 4xl.
| Class | Value | Pixels | Preview |
|---|---|---|---|
text-xs | 0.75rem | 12px | The quick brown fox |
text-sm | 0.875rem | 14px | The quick brown fox |
text-base | 1rem | 16px | The quick brown fox |
text-lg | 1.125rem | 18px | The quick brown fox |
text-xl | 1.25rem | 20px | The quick brown fox |
text-2xl | 1.5rem | 24px | The quick brown fox |
text-3xl | 1.875rem | 30px | The quick brown fox |
text-4xl | 2.25rem | 36px | The quick brown fox |
Extra small text (12px)
Small text (14px)
Base text (16px)
Large text (18px)
Extra large text (20px)
2XL text (24px)
3XL text (30px)
4XL text (36px)
Control the thickness of text with font weight utilities.
Normal weight (400)
Medium weight (500)
Semibold weight (600)
Bold weight (700)
Align text to the left, center, right, or justify.
Left aligned text
Center aligned text
Right aligned text
Justified text that will wrap and align evenly on both sides when it spans multiple lines.
Transform text case with uppercase, lowercase, or capitalize utilities.
uppercase text
LOWERCASE TEXT
capitalize each word
Normal Case Text
Add or remove text decorations like underline and line-through.
Underlined text
Strikethrough text
No underline text
Control the vertical spacing between lines of text.
Tight line height. This text has reduced spacing between lines making it more compact. Good for headings.
Normal line height. This text has standard spacing between lines for comfortable reading. Good for body text.
Relaxed line height. This text has increased spacing between lines for better readability. Good for long-form content.
Truncate text with ellipsis when it overflows.
This is a very long text that will be truncated with an ellipsis when it overflows its container
This text will also truncate with ellipsis when too long
Body text with relaxed line height for comfortable reading.
Small muted text for captions or secondary information.
Posted on Jan 15, 2024
This is the article excerpt that provides a preview of the content.
Read more →