Ring Offset Width

Default class reference

Class	Properties
ring-offset-0	--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-1	--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-2	--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-4	--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-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-600 ring-offset-0">ring-0</button>
<button class="... ring ring-pink-600 ring-offset-2">ring-2</button>
<button class="... ring ring-pink-600 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-100

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

For more information, see the ringOffsetColor 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 Tailwind's responsive design features, check out the Responsive Design documentation.

Customizing

To customize which ring offset width utilities are generated, add your custom values under ringOffsetWidth key in the theme section of your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringOffsetWidth: {
        '3': '3px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}

Learn more about customizing the default theme in the theme customization documentation.

Variants

By default, only responsive, focus-within and focus variants are generated for ring offset width utilities.

You can control which variants are generated for the ring offset width utilities by modifying the ringOffsetWidth property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and active variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       ringOffsetWidth: ['hover', 'active'],
      }
    }
  }

Disabling

If you don't plan to use the ring offset width utilities in your project, you can disable them entirely by setting the ringOffsetWidth property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     ringOffsetWidth: false,
    }
  }