Divide & Ring

Divide utilities add separators between siblings; ring utilities draw an outline-like box-shadow that does not affect layout.

4 min read Level 2/5 #tailwind#effects

What you'll learn

divide-* and ring-* solve two annoyances: separators between list items, and focus outlines that do not shift layout.

Divide

Apply divide-* to a parent and Tailwind adds a border between each child — no border on the outer edges:

<ul class="divide-y divide-gray-200">
  <li class="py-3">First</li>
  <li class="py-3">Second</li>
  <li class="py-3">Third</li>
</ul>

This is much cleaner than adding border-b to every item and then removing it from the last one.

A ring is a box-shadow that looks like a border but does not occupy layout space, so adding one never nudges surrounding elements:

<div class="ring-2 ring-blue-500 ring-offset-2">Selected card</div>
<button class="ring-inset ring-1 ring-gray-300">Inset ring</button>

Because rings do not affect layout and accept an offset, they make excellent, stable focus indicators:

<button class="focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none">
  Save
</button>