Master Tailwind's typography utilities for beautiful text styling.
Use text-{size}
classes to control font size:
text-xs — Extra small text (12px)
text-sm — Small text (14px)
text-base — Base text (16px) —
default
text-lg — Large text (18px)
text-xl — Extra large (20px)
text-2xl — 2x Extra large (24px)
text-3xl — 3x Extra large (30px)
text-4xl — 4x Extra large (36px)
text-5xl — 5x Extra large (48px)
text-6xl — 6x Extra large (60px)
Use
font-{weight}
to control text thickness:
font-thin
Thin
font-light
Light
font-normal
Normal
font-medium
Medium
font-semibold
Semibold
font-bold
Bold
font-extrabold
Extrabold
font-black
Black
italic
This text is italic. Use for emphasis.
underline
Underlined text
line-through
Strikethrough text
uppercase
uppercase text
lowercase
LOWERCASE TEXT
capitalize
each word capitalized
text-left
This text is aligned to the left (default behavior).
text-center
This text is centered on the line.
text-right
This text is aligned to the right.
text-justify
This text is justified, spreading words across the full line width for a clean block appearance when there's enough text to fill the line.
Use
text-{color}-{shade}
where shade goes from 50 (lightest) to 900
(darkest):
text-gray-700
Gray text
text-red-600
Red text
text-blue-600
Blue text
text-green-600
Green text
text-yellow-500
Yellow text
text-indigo-600
Indigo text
leading-*)
leading-tight
Tight line height. Lines are close together for compact text blocks.
leading-normal
Normal line height. The default spacing between lines of text.
leading-loose
Loose line height. More space between lines for readability.
tracking-*)
tracking-tighter
Tighter spacing
tracking-normal
Normal spacing
tracking-widest
Widest spacing