Ring Offset Width

Basic usage

Setting the ring offset width

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 className="... ring ring-pink-500 **ring-offset-0**">ring-offet-0</button>
<button className="... ring ring-pink-500 **ring-offset-2**">ring-offset-2</button>
<button className="... ring ring-pink-500 **ring-offset-4**">ring-offset-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:

<button className="... ring ring-pink-500 **ring-offset-2** **ring-offset-pink-100**">
  Save Changes
</button>

For more information, see the ring offset color documentation.