Typography
Text
A text element with comprehensive typography controls including size, color, weight, spacing, and text decorations.
Here is some text.
Colors#
Normal textMuted textDisabled textColored text
Sizes#
xssmbaselgxl2xl3xl4xl5xl6xl7xl8xl9xl
Weights#
ThinExtralightLightNormalMediumSemiboldBoldExtraboldBlack
Alignment#
Left
Center
Right
Letter spacing#
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Line height#
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Formatting#
ItalicUnderlineStrikethrough
Decoration style#
Customize the style of underline or strikethrough decorations.
Solid underlineDouble underlineDotted underlineDashed underlineWavy underline
Decoration color#
Red underlineBlue underlineGreen underlineOrange strikethrough
Transform#
CapitalizeUppercaseLowercase
Truncate#
This is some really long text that should truncate.
This is some really long text that should truncate.
This is some really long text that should truncate.
This is some really long text that should truncate.
Whitespace#
Control how whitespace is handled within text.
Multiple spaces collapse and text wraps normally.
This text will not wrap to the next line.
Preserves spaces
and newlines.
Preserves spaces
and wraps text.
Word break#
Control how words break when reaching the end of a line.
Supercalifragilisticexpialidocious
Supercalifragilisticexpialidocious
Supercalifragilisticexpialidocious
Vertical align#
Control vertical alignment of inline elements. Useful for superscript, subscript, and aligning text with icons.
E = mc2
H2O
aligned to top
aligned to middle
aligned to bottom
Text indent#
Indent the first line of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text defaults to size="sm" (14px with Tailwind’s default theme). Explicit size="base" uses text-base (16px).
Component props#
| Name | Type | Description |
|---|---|---|
| color | FontColor | SemanticColor | ColorName | TailwindColor |
| size | Responsive<FontSize> | "xs" | "sm" | "base" | "lg" | "xl" | ... | "9xl" |
| weight | Responsive<FontWeight> | "thin" | "light" | "normal" | "medium" | "semibold" | "bold" | ... |
| align | Responsive<TextAlign> | "left" | "center" | "right" |
| spacing | Responsive<LetterSpacing> | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" |
| lineHeight | Responsive<LineHeight> | "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" | "3"-"10" |
| wrap | Responsive<TextWrap> | "wrap" | "nowrap" | "balance" | "pretty" |
| whitespace | Responsive<Whitespace> | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "break-spaces" |
| wordBreak | Responsive<WordBreak> | "normal" | "words" | "all" | "keep" |
| transform | Responsive<TextTransform> | "capitalize" | "uppercase" | "lowercase" | "none" |
| indent | Responsive<TextIndent> | "0" | "px" | "0.5" | "1" | ... | "24" |
| verticalAlign | Responsive<VerticalAlign> | "baseline" | "top" | "middle" | "bottom" | "text-top" | "text-bottom" | "sub" | "super" |
| truncate | Responsive<boolean> | Truncate text with ellipsis |
| italic | Responsive<boolean> | Italic text style |
| underline | Responsive<boolean> | Underline text decoration |
| strikethrough | Responsive<boolean> | Line-through text decoration |
| decorationStyle | Responsive<TextDecorationStyle> | "solid" | "double" | "dotted" | "dashed" | "wavy" |
| decorationColor | FontColor | SemanticColor | ColorName | TailwindColor |
| as | TextElement | "span" | "div" | "label" | "p" | "h1" | ... | "code" | "blockquote" |
| render | RenderProp | Render prop for polymorphism |