focus = any focus; focus-visible = keyboard-only focus (the browser decides).

Example#

html
<input class="focus:ring-2 focus:ring-blue-500 rounded-lg" />
<button class="focus-visible:outline focus-visible:outline-2">Tab to me</button>

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • Use focus-visible for buttons, focus for inputs
  • Never outline-none without a visible replacement

Common mistakes#

  • Removing focus styles breaks keyboard users (WCAG 2.4.7)

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities