Skip to content

Typography

The chai-text-* family is one of the more overloaded namespaces — it handles alignment, size, and color depending on what comes after the dash. Static rules are checked first, so text-left/center/right/justify always win their token.

Font size

Class	CSS
`chai-text-xs`	`font-size: 12px`
`chai-text-sm`	`font-size: 14px`
`chai-text-base`	`font-size: 16px`
`chai-text-lg`	`font-size: 18px`
`chai-text-xl`	`font-size: 20px`
`chai-text-2xl`	`font-size: 24px`
`chai-text-3xl`	`font-size: 30px`
`chai-text-4xl`	`font-size: 36px`
`chai-text-5xl`	`font-size: 48px`
`chai-text-6xl`	`font-size: 60px`
`chai-text-7xl`	`font-size: 72px`
`chai-text-8xl`	`font-size: 96px`
`chai-text-9xl`	`font-size: 128px`
`chai-text-[42px]`	`font-size: 42px`

Alignment

Class	CSS
`chai-text-left`	`text-align: left`
`chai-text-center`	`text-align: center`
`chai-text-right`	`text-align: right`
`chai-text-justify`	`text-align: justify`

Color

chai-text-{color} — see Colors. Examples:

<p class="chai-text-chai-700">steeped</p>
<p class="chai-text-[#1a1a1a]">arbitrary</p>

Weight

Class	CSS
`chai-font-thin`	`font-weight: 100`
`chai-font-light`	`font-weight: 300`
`chai-font-normal`	`font-weight: 400`
`chai-font-medium`	`font-weight: 500`
`chai-font-semibold`	`font-weight: 600`
`chai-font-bold`	`font-weight: 700`
`chai-font-black`	`font-weight: 900`
`chai-font-500`	`font-weight: 500` (numeric)

Family

Class	CSS
`chai-font-sans`	`font-family: ui-sans-serif, system-ui, sans-serif`
`chai-font-serif`	`font-family: ui-serif, Georgia, serif`
`chai-font-mono`	`font-family: ui-monospace, ...`

Line height

Class	CSS
`chai-leading-none`	`line-height: 1`
`chai-leading-tight`	`line-height: 1.25`
`chai-leading-snug`	`line-height: 1.375`
`chai-leading-normal`	`line-height: 1.5`
`chai-leading-relaxed`	`line-height: 1.625`
`chai-leading-loose`	`line-height: 2`
`chai-leading-[1.7]`	`line-height: 1.7`
`chai-leading-24`	`line-height: 24px`

Letter spacing

Class	CSS
`chai-tracking-tighter`	`letter-spacing: -0.05em`
`chai-tracking-tight`	`letter-spacing: -0.025em`
`chai-tracking-normal`	`letter-spacing: 0`
`chai-tracking-wide`	`letter-spacing: 0.025em`
`chai-tracking-wider`	`letter-spacing: 0.05em`
`chai-tracking-widest`	`letter-spacing: 0.1em`

Decoration & style

Class	CSS
`chai-italic`	`font-style: italic`
`chai-not-italic`	`font-style: normal`
`chai-underline`	`text-decoration-line: underline`
`chai-line-through`	`text-decoration-line: line-through`
`chai-no-underline`	`text-decoration-line: none`

Casing

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

Truncation

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

Made by Saad · @developedbysaad on X