caret-* and accent-* color the text cursor and form controls.

Syntax#

html
<input class="accent-violet-500 caret-violet-500" type="text" />

All palettes apply#

Every palette in the colors/index|color system generates a caret-* class: caret-neon-purple-500, caret-neon-pink-500, caret-neon-cyan-500, caret-neon-lime-500, caret-neon-orange-500, caret-pastel-rose-500, caret-pastel-lavender-500, caret-pastel-mint-500…

Patterns#

  • Match accent to the primary palette
  • caret for brand-flavored inputs

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