Tailwind CSS Academy · Lesson

Outline and Ring Utilities

Add accessible focus indicators using ring-* utilities that render outside the element without affecting layout.

Why Outlines and Rings Matter

When users navigate with a keyboard or screen reader, visible focus indicators are essential for knowing which element is active. Browsers provide a default focus outline, but many designers suppress it with outline-none without providing an accessible replacement. Tailwind's ring-* utilities are designed precisely for this — they create visible, accessible focus indicators that look better than the browser default without sacrificing accessibility.

<!-- Accessible focus ring replacing browser default -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Press Tab to focus me
</button>

How Ring Utilities Work

Tailwind's ring is implemented using box-shadow, not the CSS outline property. This means it participates in shadow stacking and can be combined with other box shadows. The ring-* utilities set the ring width, ring-{color} sets the color, and ring-offset-* adds a gap between the element and the ring. Unlike outlines, rings do not affect layout and work correctly with border-radius.

<!-- Ring details: width + color + offset -->
<div class="flex gap-6 p-6">
  <!-- Width only -->
  <button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:outline-none">
    Ring width 2
  </button>
  <!-- Width + color -->
  <button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
    Colored ring
  </button>
  <!-- Width + color + offset -->
  <button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
    Ring with offset
  </button>
</div>

All lessons in this course

← Back to Tailwind CSS Academy