Utilities

Accessibility

  • focus-ring – resets browser default focus styling and displays a ring when the element is focused (uses --default-ring-width)
  • focus-ring-<n> – sets ring width to npx via ---focus-ring-width (e.g. focus-ring-1, focus-ring-2); pair with focus-ring. Offset width stays 1px. Arbitrary lengths like focus-ring-[3px] are supported
  • focus-ring-offset-<color> – changes the offset color of the focus ring to match the background color of its parent