Text color
Text color utilities using semantic role tokens with light/dark theme resolution and alpha multipliers.
text-* utilities set text colors using semantic role tokens that resolve through light-dark().
| Class | Token |
|---|
text-background | --background |
text-foreground | --foreground |
text-card / text-card-foreground | --card / --card-foreground |
text-input / text-input-foreground | --input / --input-foreground |
text-border / text-border-foreground | --border / --border-foreground |
| Class | Token | Use |
|---|
text-muted / text-muted-foreground | --muted / --muted-foreground | Secondary copy, captions, hints |
text-faded / text-faded-foreground | --faded / --faded-foreground | Tertiary, lower-emphasis text |
| Class | Token |
|---|
text-primary / text-primary-foreground | --primary / --primary-foreground |
text-secondary / text-secondary-foreground | --secondary / --secondary-foreground |
text-tertiary / text-tertiary-foreground | --tertiary / --tertiary-foreground |
| Class | Token |
|---|
text-info / text-info-foreground | --info / --info-foreground |
text-success / text-success-foreground | --success / --success-foreground |
text-warning / text-warning-foreground | --warning / --warning-foreground |
text-destructive / text-destructive-foreground | --destructive / --destructive-foreground |
| Class | Token | Note |
|---|
text-white | --white | Static across light/dark modes |
text-black | --black | Static across light/dark modes |
<p class="text-foreground">Primary copy.</p>
<p class="text-sm text-muted-foreground">Secondary caption copy.</p>
<p class="text-destructive">Error state.</p>
- Hover: All roles have
hover:text-* counterparts. See Hover states.
- Opacity: Dim text channels using
text-opacity-*. See Color opacity.