What's the difference between focus: and focus-visible:, and which should a button use?

focus: applies whenever the element has focus, including after a mouse click; focus-visible: applies when the browser decides focus should be shown, typically keyboard navigation. Buttons and links usually use focus-visible: so keyboard users get a clear ring without showing it after clicks.

The Form Nobody Could Use with a Keyboard — Tailwind CSS in Production

Scenario

Example team: a sign-up form's design review flags the browser's focus outline after clicking buttons. The quick fix adds focus:outline-none to every input and button.

What you see in production

An accessibility audit fails the product; keyboard and switch users can't tell which field or button is focused. A customer who relies on keyboard navigation can't complete sign-up.

The naive code

<input class="border focus:outline-none">
<button class="bg-indigo-600 focus:outline-none">Sign up</button>

Reproduce it

Click into the preview, then press Tab to move between controls:

Removed vs visible focusTry it yourself

<div class="grid gap-6 p-6 sm:grid-cols-2">
  <div class="space-y-3">
    <p class="text-sm font-semibold text-rose-600">outline removed</p>
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none">
    <button class="w-full rounded-lg bg-indigo-600 py-2 text-white focus:outline-none">Sign up</button>
  </div>
  <div class="space-y-3">
    <p class="text-sm font-semibold text-emerald-600">visible focus</p>
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-hidden">
    <button class="w-full rounded-lg bg-indigo-600 py-2 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign up</button>
  </div>
</div>

Root cause

The focus indicator is the keyboard user's cursor. Removing it without a replacement breaks WCAG 2.4.7 (Focus Visible). The design complaint was really about focus rings appearing after mouse clicks.

The fix

Use focus-visible: for buttons and links: browsers show it for keyboard focus and not for mouse clicks, which answers the design concern.
For inputs, keep a clear focus style (border colour plus a ring).
Use outline-hidden (v4) instead of outline-none when you replace the outline with a ring: it keeps an outline in Windows high-contrast (forced colours) mode.
Add keyboard-only checks to your definition of done.

Trade-offs

Strong focus styles need design attention; agree on one consistent style in your tokens.

Detect it in production

axe or Lighthouse accessibility checks in CI, plus a manual keyboard pass of key flows each release.
Search the codebase for outline-none without a ring/outline replacement.

Key points

Never remove focus indicators without a visible replacement.
focus-visible: targets keyboard focus; outline-hidden respects forced-colour modes.