Typography Utilities
Text Size
| Utility | Effect |
|---|---|
text-xs | Extra small text |
text-sm | Small text |
text-base | Base text |
text-lg | Large text |
text-xl | Extra large text |
text-2xl | 2xl text |
text-3xl | 3xl text |
text-4xl | 4xl text |
text-5xl | 5xl text |
text-6xl | 6xl text |
text-[22px] | Arbitrary text size |
Alignment
| Utility | Effect |
|---|---|
text-left | Horizontal left alignment |
text-center | Horizontal center alignment |
text-right | Horizontal right alignment |
text-top | Vertical top alignment |
text-middle | Vertical middle alignment |
text-bottom | Vertical bottom alignment |
Font
| Utility | Effect |
|---|---|
font-thin | Thin font weight |
font-extralight | Extra light font weight |
font-light | Light font weight |
font-normal | Normal font weight |
font-medium | Medium font weight |
font-semibold | Semibold font weight |
font-bold | Bold font weight |
font-extrabold | Extra bold font weight |
font-black | Black font weight |
font-{themeFamily} | Theme font family |
italic | Italic text style |
not-italic | Normal text style |
UI Toolkit supports normal/bold and italic. Intermediate font weights collapse to normal or bold.
Wrapping
| Utility | Effect |
|---|---|
truncate | Truncates overflowing text |
whitespace-nowrap | Prevents wrapping |
whitespace-normal | Allows normal wrapping |
Last updated on