Accent Color

Utilities for controlling the accented color of a form control.

Show all classes

Use the 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.

Changing the opacity

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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:accent-pink-500 to only apply the accent-pink-500 utility on hover.

Note, while it’s possible to set an accent color using the hover and modifiers, the resulting color will be slightly different than what you set, as browsers automatically adjust the brightness of the accent color for these two states.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:accent-pink-500 to apply the accent-pink-500 utility at only medium screen sizes and above.

By default, Tailwind makes the entire default color palette available as accent colors. You can by editing theme.colors or theme.extend.colors in your file.

tailwind.config.js

Alternatively, you can customize just your accent colors by editing theme.accentColor or theme.extend.accentColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

<input type="checkbox" class="accent-[#50d71e]" checked>

Learn more about arbitrary value support in the arbitrary values documentation.