Tailwind Typography

Typography classes in Tailwind control every visual aspect of text — size, weight, alignment, line height, letter spacing, and more. Good typography makes content readable and professional.

Font Size

Tailwind uses a named scale for font sizes. Each step is progressively larger.

Class       CSS Output     Approx size
───────────────────────────────────────
text-xs     0.75rem        12px
text-sm     0.875rem       14px
text-base   1rem           16px  ← default browser size
text-lg     1.125rem       18px
text-xl     1.25rem        20px
text-2xl    1.5rem         24px
text-3xl    1.875rem       30px
text-4xl    2.25rem        36px
text-5xl    3rem           48px
text-6xl    3.75rem        60px
text-7xl    4.5rem         72px
text-8xl    6rem           96px
text-9xl    8rem           128px

Font Weight

Class             CSS Output
──────────────────────────────────────────
font-thin         font-weight: 100
font-extralight   font-weight: 200
font-light        font-weight: 300
font-normal       font-weight: 400
font-medium       font-weight: 500
font-semibold     font-weight: 600
font-bold         font-weight: 700
font-extrabold    font-weight: 800
font-black        font-weight: 900

Font Family

font-sans    →  System sans-serif stack (clean, modern)
font-serif   →  System serif stack (traditional, print)
font-mono    →  Monospace stack (code, terminal)

Text Alignment

text-left     →  text-align: left (default)
text-center   →  text-align: center
text-right    →  text-align: right
text-justify  →  text-align: justify

Diagram:
text-left:    This text starts here and flows right →
text-center:          This text is centered
text-right:               This text ends here →
text-justify: Spaces  evenly  distribute  to  fill  line

Line Height (Leading)

Class             CSS Output
──────────────────────────────────────────
leading-none      line-height: 1
leading-tight     line-height: 1.25
leading-snug      line-height: 1.375
leading-normal    line-height: 1.5    ← default
leading-relaxed   line-height: 1.625
leading-loose     line-height: 2

Diagram:
leading-tight:  │Line 1
                │Line 2 (close together)

leading-loose:  │Line 1
                │
                │Line 2 (far apart)

Letter Spacing (Tracking)

Class              CSS Output
────────────────────────────────────────────
tracking-tighter   letter-spacing: -0.05em
tracking-tight     letter-spacing: -0.025em
tracking-normal    letter-spacing: 0
tracking-wide      letter-spacing: 0.025em
tracking-wider     letter-spacing: 0.05em
tracking-widest    letter-spacing: 0.1em

Diagram:
tracking-tight:   Tighter text
tracking-normal:  N o r m a l
tracking-widest:  W  I  D  E  S  T

Text Decoration

underline           →  Adds underline
overline            →  Line above text
line-through        →  Strikethrough
no-underline        →  Removes underline

decoration-blue-500 →  Sets underline/line color
decoration-2        →  Sets line thickness
decoration-dashed   →  Dashed underline style
decoration-wavy     →  Wavy underline style

Text Transform

uppercase    →  ALL CAPS
lowercase    →  all lowercase
capitalize   →  First Letter Of Each Word
normal-case  →  removes transformation

Text Overflow

truncate       →  Cuts text and adds ... (requires fixed width)
overflow-clip  →  Cuts text with no ellipsis
overflow-ellipsis → Adds ... at cut point (alias for truncate)

Example:
<p class="w-48 truncate">This is a very long sentence that will be cut off.</p>

Output: "This is a very long sen..."

Whitespace and Word Break

whitespace-normal    →  Default wrapping
whitespace-nowrap    →  Prevents line break
whitespace-pre       →  Preserves spaces and line breaks
whitespace-pre-line  →  Preserves line breaks, collapses spaces

break-normal   →  Default break behavior
break-words    →  Breaks long words to next line
break-all      →  Breaks any character at line end