Typography

Font Family

sz prop	Tailwind class
{ fontFamily: 'sans' }	font-sans
{ fontFamily: 'serif' }	font-serif
{ fontFamily: 'mono' }	font-mono
{ fontFamily: '--my-font' }	font-(family-name:--my-font)
{ fontFamily: "'My Font'" }	font-['My_Font']

font families — sans, serif, mono

SansSerifMono

sz prop	Tailwind class
{ text: 'xs' }	text-xs
{ text: 'sm' }	text-sm
{ text: 'base' }	text-base
{ text: 'lg' }	text-lg
{ text: 'xl' }	text-xl
{ text: '2xl' }	text-2xl
{ text: '4xl' }	text-4xl
{ text: '6xl' }	text-6xl
{ text: '9xl' }	text-9xl
{ text: '1.5rem' }	text-[1.5rem]
{ text: '--spacing(4)' }	text-[--spacing(4)]

text: '--spacing(4)' is a Tailwind build-time function (v4.3.2+), not a CSS variable — a bare --token stays parenthesized var sugar (text-(--size)) while a --name(...) call becomes a bracketed arbitrary value (text-[--spacing(4)]). This one rule applies to every value position, not just font-size; see sz Props → CSS Variables for the full contrast. You write no brackets or parens either way.

font size scale — xs, sm, base, lg, xl, 2xl

text-xs: The quick brown foxtext-sm: The quick brown foxtext-base: The quick brown foxtext-lg: The quick brown foxtext-xl: The quick brown foxtext-2xl: The quick

Font Weight

sz prop	Tailwind class
{ weight: 'thin' }	font-thin
{ weight: 'normal' }	font-normal
{ weight: 'medium' }	font-medium
{ weight: 'semibold' }	font-semibold
{ weight: 'bold' }	font-bold
{ weight: 700 }	font-[700]
{ weight: 900 }	font-[900]

font weight scale — normal, medium, semibold, bold

Normal — The quick brown foxMedium — The quick brown foxSemibold — The quick brown foxBold — The quick brown fox

Text Color

sz prop	Tailwind class
{ color: 'gray-900' }	text-gray-900
{ color: 'white' }	text-white
{ color: 'blue-500' }	text-blue-500
{ color: 'transparent' }	text-transparent
{ color: 'inherit' }	text-inherit
{ color: '#50d71e' }	text-[#50d71e]
{ color: '--text-primary' }	text-(--text-primary)
{ color: { color: 'blue-500', op: 50 } }	text-blue-500/50
{ color: { color: '--text-primary', op: 80 } }	text-(--text-primary)/80

text color examples

primarysky-500slate-500white on violet-600

Line Height & Letter Spacing

sz prop	Tailwind class
{ leading: 'none' }	leading-none
{ leading: 'tight' }	leading-tight
{ leading: 'normal' }	leading-normal
{ leading: 'relaxed' }	leading-relaxed
{ leading: 'loose' }	leading-loose
{ tracking: 'tight' }	tracking-tight
{ tracking: 'wide' }	tracking-wide
{ tracking: 'widest' }	tracking-widest

letter spacing — tight, normal, wide, widest

tracking-tight: ABCDEFGHtracking-normal: ABCDEFGHtracking-wide: ABCDEFGHtracking-widest: ABCDEFGH

Text Shorthand (size + leading merged)

// { text, leading } together → merged single class
{ text: 'lg', leading: 7 }    // → text-lg/7
{ text: 'sm', leading: 'tight' } // → text-sm/tight

Text Alignment & Transform

sz prop	Tailwind class
{ textAlign: 'left' }	text-left
{ textAlign: 'center' }	text-center
{ textAlign: 'right' }	text-right
{ textAlign: 'justify' }	text-justify
{ textTransform: 'uppercase' }	uppercase
{ textTransform: 'lowercase' }	lowercase
{ textTransform: 'capitalize' }	capitalize

text alignment — left, center, right

Left aligned text

Center aligned text

Right aligned text

Text Decoration

sz prop	Tailwind class
{ decoration: 'underline' }	underline
{ decoration: 'line-through' }	line-through
{ decoration: 'none' }	no-underline
{ decoration: 'dashed' }	decoration-dashed
{ decorationColor: 'blue-500' }	decoration-blue-500
{ underlineOffset: 4 }	underline-offset-4

Text Overflow & Wrap

sz prop	Tailwind class
{ truncate: true }	truncate
{ textEllipsis: true }	text-ellipsis
{ textClip: true }	text-clip
{ textWrap: 'nowrap' }	text-nowrap
{ textWrap: 'balance' }	text-balance
{ textWrap: 'pretty' }	text-pretty
{ lineClamp: 3 }	line-clamp-3

{ truncate: true } — overflow text clipped with ellipsis

This is a very long text string that will be truncated with an ellipsis at the edge.

Font Style & Smoothing

sz prop	Tailwind class
{ fontStyle: 'italic' }	italic
{ fontStyle: 'normal' }	not-italic
{ fontSmoothing: 'grayscale' }	antialiased
{ fontSmoothing: 'subpixel' }	subpixel-antialiased

Numeric Glyphs (font-variant-numeric)

CSS takes one keyword per group and combines the groups, so each group is one key: a second value in the same group replaces the first, and different groups combine. nums: 'normal' resets them: written after the group keys it replaces them, and group keys written after it replace it.

sz prop	Tailwind class
{ numSpacing: 'tabular' }	tabular-nums
{ numSpacing: 'proportional' }	proportional-nums
{ numFigure: 'lining' }	lining-nums
{ numFigure: 'oldstyle' }	oldstyle-nums
{ numFraction: 'diagonal' }	diagonal-fractions
{ numFraction: 'stacked' }	stacked-fractions
{ numOrdinal: true }	ordinal
{ numSlashedZero: true }	slashed-zero
{ nums: 'normal' }	normal-nums
{ numSpacing: 'tabular', numSlashedZero: true }	tabular-nums slashed-zero

Tailwind keeps each group in a variable that a child does not inherit: a child that sets one group of its own shows only that group. Put every group an element needs on that element.

Font Features (v4.2)

sz prop	Tailwind class
{ fontFeatures: 'normal' }	font-features-[normal]
{ fontFeatures: '"liga" 1' }	font-features-["liga"_1]

List Style

sz prop	Tailwind class
{ list: 'disc' }	list-disc
{ list: 'decimal' }	list-decimal
{ list: 'none' }	list-none
{ listPos: 'inside' }	list-inside
{ listPos: 'outside' }	list-outside

Content (Pseudo-elements)

sz prop	Tailwind class
{ content: 'none' }	content-none
{ content: '""' }	content-['']
{ content: "''" }	content-['']
{ content: '"hello"' }	content-['hello']
{ content: '--c' }	content-(--c)

Examples

// Heading
<h1 sz={{
  text: '4xl',
  weight: 'bold',
  tracking: 'tight',
  leading: 'tight',
  color: 'gray-900',
}} />

// Monospace code label
<span sz={{
  fontFamily: 'mono',
  text: 'xs',
  tracking: 'wider',
  textTransform: 'uppercase',
  color: 'blue-600',
  bg: 'blue-50',
  px: 2,
  py: 0.5,
  rounded: 'sm',
}} />

// Truncated description
<p sz={{
  text: 'sm',
  color: 'gray-600',
  lineClamp: 2,
}} />