Ring offset color

Class reference

# Usage

Use the ring-offset-{color} utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren’t actually possible in CSS.

<div class="... bg-violet-100">
  <button class="... ring ring-violet-600 ring-offset-4 ring-offset-violet-100">
    ring-offset-violet-100
  </button>
</div>

# Responsive

To control the ring offset color at a specific breakpoint, add a {screen}: prefix to any existing ring offset color utility. For example, use md:ring-offset-blue-500 to apply the ring-offset-blue-500 utility at only medium screen sizes and above.

<button class="ring-2 ring-offset-2 ring-offset-blue-300 md:ring-offset-blue-500">
  <!-- ... -->
</button>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.