text-<palette>-<shade> — foreground color for any element.

Syntax#

html
<p class="text-blue-600 dark:text-blue-400">Readable in both schemes</p>

All palettes apply#

Every palette in the colors/index|color system generates a text-* class: the theme palettes of your chosen preset…

Patterns#

  • Body text: text-slate-600 dark:text-slate-400
  • Links: the dominant palette at 600, hover 500
  • Never pure black — text-slate-950 is softer

colors/index|Color hub · concepts/dark-mode-strategies|Dark mode · accessibility/color-contrast|Contrast