💍 Tailwind CSS - Ring (Width, Color & Offset)

Ring utilities apply a box-shadow based "ring" around an element. They are commonly used for focus states and custom borders.

Control the width of the ring:

• ring-0, ring-1, ring-2, ring-4, ring-8
• ring (3px, but uses specific defaults)
• ring-inset (render ring inside the element)

Control the color of the ring:

• Any Tailwind color: ring-blue-500
• Opacity: ring-blue-500/50

Control the width and color of the gap between the ring and the element:

• Offset Width: ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8
• Offset Color: ring-offset-white, ring-offset-blue-500