Accent Color

Utility	Properties
Error: 429

This example showcases the default browser accent color and a custom Indigo color. The custom accent will have a light indigo shade.

Default Custom

<div class="d-g g-8 gtc-1 sm:gtc-2">
  <label><input class="mr-1" type="checkbox" checked />Default </label>
  <label><input class="ac-indigo-2 mr-1" type="checkbox" checked />Custom</label>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="ac-lead h:ac-indigo ..."></div>