Outline, Rings & Divide

Outline, Rings & Divide

Outline

• outline-none, outline (1px), outline-dashed, outline-dotted, outline-double.
• outline-<n> - width.
• outline-offset-<n> - offset from the edge.
• outline-<color> - color.

<button class="outline outline-2 outline-sky-500 outline-offset-2">...</button>

Rings

Rings are box-shadows, so they don't affect layout:

• ring - 1px ring, default ring color (--color-blue-500).
• ring-2, ring-4, ring-8, ring-0.
• ring-<color>.
• ring-offset-<n> - offset width.
• ring-offset-<color>.
• inset ring: inset-ring, inset-ring-<n>.

<button class="ring-2 ring-sky-500 ring-offset-2">Focus</button>

Divide

Add borders between children:

<div class="divide-y divide-gray-200">
  <div>Row 1</div>
  <div>Row 2</div>
</div>

• divide-x, divide-y - direction.
• divide-x-reverse, divide-y-reverse.
• divide-<color>, divide-<n> (width).

TL;DR

• outline-* draws outlines with optional offset.
• ring-2 ring-sky-500 draws a box-shadow ring.
• divide-y divide-gray-200 adds borders between children.
• Rings don't affect layout; outlines and borders do.