Tailwind CSS Fonts Overview
Font Families
Tailwind provides utility classes for different font families:
Example: <p class="font-sans">Hello</p>
.font-sans → Sans-serif font
.font-serif → Serif font
.font-mono → Monospace font
Font Sizes
Use text-{size} classes to control font size.
Example: <p class="text-xl">Hello</p>
.text-xs → Extra small
.text-sm → Small
.text-base → Base size
.text-lg → Large
.text-xl → Extra large
.text-2xl → 2x extra large
.text-3xl → 3x extra large
Font Weight
Control weight with font-{weight} classes.
Example: <p class="font-bold">Hello</p>
.font-thin → 100
.font-extralight → 200
.font-light → 300
.font-normal → 400
.font-medium → 500
.font-semibold → 600
.font-bold → 700
.font-extrabold → 800
.font-black → 900
Letter Spacing (Tracking)
Use tracking-{size} classes.
Example: <p class="tracking-wide">Hello</p>
.tracking-tighter → -0.05em
.tracking-tight → -0.025em
.tracking-normal → 0em
.tracking-wide → 0.025em
.tracking-wider → 0.05em
.tracking-widest → 0.1em
Line Height (Leading)
Use leading-{size} classes.
Example: <p class="leading-relaxed">Hello</p>
.leading-none → 1
.leading-tight → 1.25
.leading-snug → 1.375
.leading-normal → 1.5
.leading-relaxed → 1.625
.leading-loose → 2
Text Alignment
Use text-{alignment} classes.
Example: <p class="text-center">Hello</p>
.text-left → Left aligned
.text-center → Center aligned
.text-right → Right aligned
.text-justify → Justified text
Text Decoration
Use underline, line-through, or no-underline.
Example: <p class="underline">Hello</p>
.underline → Underlined
.line-through → Strikethrough
.no-underline → Remove underline
Font Style
Use italic or not-italic classes.
Example: <p class="italic">Hello</p>
.italic → Italic text
.not-italic → Normal text