How should I style keyboard focus (focus-visible) without removing the outline? Tailwind outline-none question.

Do not remove it, replace it

Removing the outline without an alternative fails WCAG 2.4.7 (Focus Visible) and, with WCAG 2.2, the Focus Appearance guidance. Keyboard and screen magnifier users depend on it.

Use :focus-visible

:focus-visible matches when the browser decides the focus indicator should show (keyboard navigation), and usually not on mouse clicks on buttons. Style that, not plain :focus.

:focus-visible {
  outline: 2px solid var(--focus, #2563eb);
  outline-offset: 2px;
}

/* inputs can show a ring on any focus */
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--focus, #2563eb);
  outline-offset: 0;
}

Aim for at least 3:1 contrast between the indicator and adjacent colors and an indicator thickness of 2px or more.

Tailwind

<a class="rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<button class="focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 outline-hidden">

Notes for Tailwind 4: outline-none now means outline-style: none, while outline-hidden (what v3 outline-none was for) hides the outline normally but still draws one in forced colors mode. If you replace the outline with a ring, use outline-hidden so Windows High Contrast users still get an outline.

Group focus

For a card with a link inside use focus-within:ring-2 on the card.

Pitfalls

• Do not rely on color alone; add thickness or offset.
• Custom components (div buttons) need tabindex="0"; better, use real <button> and <a>.
• Modals must trap and restore focus; see the accessible modal snippet.
• Test by pressing Tab through the page with the mouse unplugged.
• Check indicator colors with the contrast checker.