Background

Accent Color

Utilities for controlling the accented color of a form control.

Basic usage

Setting the accent color

Use the accent-{color} utilities to change the accent color of an element. This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color.

Browser default

Customized

<label>
  <input type="checkbox" defaultChecked> Browser default
</label>
<label>
  <input type="checkbox" className="**accent-pink-500**" defaultChecked> Customized
</label>

Changing the opacity

While it's possible to control the opacity of the accent color using the color opacity modifier, the rgba() alpha value is only supported in Firefox at this time (last tested November 2021).

<input type="checkbox" className="**accent-emerald-500/25**" checked> Emerald