Outline & Accent

Use outline utilities for focus indicators and accent utilities to theme native form controls.

4 min read Level 1/5 #tailwind#effects#a11y

What you'll learn

Use outline with outline-offset for focus
Never remove focus without a replacement
Tint checkboxes, radios, and ranges with accent-*

Outline is the keyboard user’s lifeline. This lesson is as much about accessibility as it is about styling.

Focus Outlines

Style the outline rather than deleting it. Pair focus-visible: so the indicator only shows for keyboard navigation, not mouse clicks:

<button class="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
  Submit
</button>

A short rule: never use outline-none without providing a replacement (a ring or a styled outline). Removing the focus indicator with nothing in its place makes your UI unusable for keyboard users.

Accent Color

accent-* tints native form controls — checkboxes, radios, and range sliders — using the browser’s built-in styling, so you get themed controls with no custom widget code:

<input type="checkbox" class="accent-pink-600" />
<input type="radio" class="accent-emerald-500" />
<input type="range" class="accent-blue-500" />

Caret Color

caret-* colors the blinking text-insertion caret in inputs and textareas:

<input class="caret-blue-500" placeholder="Type here" />

Styling SVG →