Tailwind CSS Academy · Lesson

Focus and Focus-Visible Variants

Apply focus:* styles for keyboard navigation and focus-visible:* to show focus rings only for keyboard users, not mouse clicks.

The Importance of Focus Styles

Keyboard navigation is used by people with motor disabilities, power users, and anyone filling out a long form. When an element is focused via keyboard, the browser highlights it with a focus indicator. CSS's :focus pseudo-class triggers on any focus event, while :focus-visible triggers only when the browser determines a visible focus indicator is helpful — typically keyboard navigation. Tailwind provides both as focus: and focus-visible: variant prefixes.

<!-- focus-visible is the accessible modern choice -->
<div class="flex gap-4">
  <button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
    Tab to me
  </button>
</div>

focus: Variant Basics

The focus: variant applies a style whenever the element receives focus, regardless of how — mouse click, touch, or keyboard. The most common use is removing the browser's default focus outline and replacing it with a custom ring: focus:outline-none focus:ring-2 focus:ring-blue-500. While convenient, this pattern has a downside: mouse users see the ring on click too, which some designers consider visually intrusive.

<!-- focus: fires on both mouse click and keyboard tab -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    placeholder="Click or tab to focus"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  />
  <button class="w-full bg-gray-200 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">
    Focus-on-click-too button
  </button>
</div>

All lessons in this course

← Back to Tailwind CSS Academy