Ring offset width

Class reference

# Usage

Use the ring-offset-{width} utilities to simulate an offset by adding solid white box-shadow and increasing the thickness of the accompanying outline ring to accommodate the offset.

<button class="... ring ring-pink-100 ring-offset-0">ring-0</button>
<button class="... ring ring-pink-100 ring-offset-2">ring-2</button>
<button class="... ring ring-pink-100 ring-offset-4">ring-4</button>

# Changing the offset color

You can’t actually offset a box-shadow in CSS, so we have to fake it using a solid color shadow that matches the parent background color. We use white by default, but if you are adding a ring offset over a different background color, you should use the ring-offset-{color} utilities to match the parent background color:

<div class="... bg-green-0">
  <button class="... ring ring-green-600 ring-offset-4 ring-offset-green-0">
    ring-offset-green-0
  </button>
</div>

For more information, see the ring offset color documentation.

# Responsive

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

<button class="ring-2 ring-offset-2 md:ring-offset-4">
  <!-- ... -->
</button>

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