Ring offset width

Utilities for simulating an offset when adding outline rings.


Class reference

ClassProperties
ring-opacity-0--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-1--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-2--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-4--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-8--tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 

# 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:

bg-green-0

<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.