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-slate-500, caret-gray-500, caret-zinc-500, caret-neutral-500, caret-stone-500, caret-red-500, caret-orange-500, caret-amber-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