Typography Classes
Font size, weight, alignment, and text utilities
| Class | Size | Line Height |
|---|
text-xs | 12px | 16px |
text-sm | 14px | 20px |
text-base | 16px | 24px |
text-lg | 18px | 28px |
text-xl | 20px | 28px |
text-2xl | 24px | 32px |
text-3xl | 30px | 36px |
text-4xl | 36px | 40px |
text-5xl | 48px | 48px |
text-6xl | 60px | 60px |
text-7xl | 72px | 72px |
text-8xl | 96px | 96px |
text-9xl | 128px | 128px |
'text-6xl' // 60px font
'text-[42px]' // Arbitrary 42px
| Class | Weight |
|---|
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 |
| Class | CSS Output |
|---|
text-left | text-align: left |
text-center | text-align: center |
text-right | text-align: right |
text-justify | text-align: justify |
| Class | Value |
|---|
leading-none | 1 |
leading-tight | 1.25 |
leading-snug | 1.375 |
leading-normal | 1.5 |
leading-relaxed | 1.625 |
leading-loose | 2 |
leading-{n} | Spacing scale |
| Class | Value |
|---|
tracking-tighter | -0.05em |
tracking-tight | -0.025em |
tracking-normal | 0 |
tracking-wide | 0.025em |
tracking-wider | 0.05em |
tracking-widest | 0.1em |
| Class | CSS Output |
|---|
uppercase | text-transform: uppercase |
lowercase | text-transform: lowercase |
capitalize | text-transform: capitalize |
normal-case | text-transform: none |
| Class | CSS Output |
|---|
underline | text-decoration: underline |
line-through | text-decoration: line-through |
no-underline | text-decoration: none |
| Class | CSS Output |
|---|
whitespace-normal | white-space: normal |
whitespace-nowrap | white-space: nowrap |
whitespace-pre | white-space: pre |
whitespace-pre-line | white-space: pre-line |
whitespace-pre-wrap | white-space: pre-wrap |
| Class | Description |
|---|
truncate | Truncate with ellipsis (overflow + nowrap) |
text-ellipsis | text-overflow: ellipsis |
text-clip | text-overflow: clip |
| Class | CSS Output |
|---|
object-contain | object-fit: contain |
object-cover | object-fit: cover |
object-none | object-fit: none |
// Large bold heading
'text-6xl font-bold tracking-tight'
// Subtitle
'text-xl text-zinc-400 leading-relaxed'
// Uppercase label
'text-sm font-medium uppercase tracking-widest'
