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]

Font Weight

sz prop	Tailwind class
{ fontWeight: 'thin' }	font-thin
{ fontWeight: 'normal' }	font-normal
{ fontWeight: 'medium' }	font-medium
{ fontWeight: 'semibold' }	font-semibold
{ fontWeight: 'bold' }	font-bold
{ fontWeight: 700 }	font-700
{ fontWeight: 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
{ uppercase: true }	uppercase
{ lowercase: true }	lowercase
{ capitalize: true }	capitalize

text alignment — left, center, right

Left aligned text
Center aligned text
Right aligned text

Text Decoration

sz prop	Tailwind class
{ underline: true }	underline
{ lineThrough: true }	line-through
{ noUnderline: true }	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
{ 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
{ italic: true }	italic
{ notItalic: true }	not-italic
{ antialiased: true }	antialiased
{ subpixelAntialiased: true }	subpixel-antialiased

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',
  fontWeight: 'bold',
  tracking: 'tight',
  leading: 'tight',
  color: 'gray-900',
}} />

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

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