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: text-neon-purple-500, text-neon-pink-500, text-neon-cyan-500, text-neon-lime-500, text-neon-orange-500, text-pastel-rose-500, text-pastel-lavender-500, text-pastel-mint-500…

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