Typography

Utilities for controlling font family, size, weight, alignment, line height, letter spacing, decoration, transforms, whitespace, and text rendering.

Font Family

Class	CSS Property
`font-sans`	font-family: var(--font-sans)
`font-serif`	font-family: var(--font-serif)
`font-mono`	font-family: var(--font-mono)

Class	CSS Property
`text-xs`	font-size: var(--text-xs); line-height: var(--leading-normal)
`text-sm`	font-size: var(--text-sm); line-height: var(--leading-normal)
`text-base`	font-size: var(--text-base); line-height: var(--leading-normal)
`text-lg`	font-size: var(--text-lg); line-height: var(--leading-relaxed)
`text-xl`	font-size: var(--text-xl); line-height: var(--leading-relaxed)
`text-2xl`	font-size: var(--text-2xl); line-height: var(--leading-snug)
`text-3xl`	font-size: var(--text-3xl); line-height: var(--leading-snug)
`text-4xl`	font-size: var(--text-4xl); line-height: var(--leading-tight)

Example: Font size scale

text-xs - Extra small

text-sm - Small

text-base - Base

text-lg - Large

text-xl - Extra large

text-2xl

text-3xl

text-4xl

<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2XL</p>
<p class="text-3xl">3XL</p>
<p class="text-4xl">4XL</p>

Font Weight

Class	CSS Property
`font-light`	font-weight: var(--font-light)
`font-normal`	font-weight: var(--font-normal)
`font-medium`	font-weight: var(--font-medium)
`font-semibold`	font-weight: var(--font-semibold)
`font-bold`	font-weight: var(--font-bold)
`font-extrabold`	font-weight: var(--font-extrabold)

Text Alignment

Class	CSS Property
`text-left`	text-align: left
`text-center`	text-align: center
`text-right`	text-align: right

Line Height

Class	CSS Property
`leading-none`	line-height: var(--leading-none)
`leading-tight`	line-height: var(--leading-tight)
`leading-snug`	line-height: var(--leading-snug)
`leading-normal`	line-height: var(--leading-normal)
`leading-relaxed`	line-height: var(--leading-relaxed)
`leading-loose`	line-height: var(--leading-loose)

Letter Spacing

Class	CSS Property
`tracking-tight`	letter-spacing: var(--tracking-tight)
`tracking-normal`	letter-spacing: var(--tracking-normal)
`tracking-wide`	letter-spacing: var(--tracking-wide)

Text Decoration

Class	CSS Property
`underline`	text-decoration-line: underline
`line-through`	text-decoration-line: line-through
`no-underline`	text-decoration-line: none

Text Transform

Class	CSS Property
`uppercase`	text-transform: uppercase
`lowercase`	text-transform: lowercase
`capitalize`	text-transform: capitalize
`normal-case`	text-transform: none

Whitespace

Class	CSS Property
`whitespace-normal`	white-space: normal
`whitespace-nowrap`	white-space: nowrap
`whitespace-pre`	white-space: pre
`whitespace-pre-wrap`	white-space: pre-wrap

Truncate

Class	CSS Property
`truncate`	overflow: hidden; text-overflow: ellipsis; white-space: nowrap

Example: Truncating text

This is a very long paragraph that will be truncated with an ellipsis when it overflows its container width.

<p class="truncate max-w-sm">
  This is a very long paragraph that will be truncated...
</p>

Font Style & Miscellaneous

Class	CSS Property
`italic`	font-style: italic
`not-italic`	font-style: normal
`antialiased`	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
`text-balance`	text-wrap: balance