Day 3 - Typography

Master Tailwind's typography utilities for beautiful text styling.

1. Font Sizes

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)

2. Font Weights

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

3. Text Styles & Decoration

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

4. Text Alignment

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.

5. Text Colors

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

6. Line Height & Letter Spacing

Line Height (`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.

Letter Spacing (`tracking-*`)

tracking-tighter

Tighter spacing

tracking-normal

Normal spacing

tracking-widest

Widest spacing

← Previous: Setup Next: Buttons →