Tailwind Skill: Styling Checkboxes/Radios (Accent Color)

Checkboxes

The `accent-{color}-{shade}` class (e.g., `accent-blue-500`) changes the color of the browser's default checkbox tick and border when checked.

Default Checkbox

Blue Accent Checkbox (`accent-blue-500`)

Pink Accent Checkbox (`accent-pink-600`)

Green Accent Checkbox (`accent-green-500`)

Similarly, `accent-{color}-{shade}` works for radio buttons, changing the color of the selected dot.

Default Radio

Teal Accent Radio (`accent-teal-500`)

Purple Accent Radio (`accent-purple-600`)