Tailwind CSS Ring
Add focus rings in Tailwind CSS with ring-*, ring-offset-*, and ring-{color} utilities. Essential for button focus states, form inputs, and accessible UI design.
The ring-* utilities in Tailwind CSS create a box-shadow-based outline around elements. Unlike border, rings don't affect layout or element sizing. They're the go-to approach for focus indicators, selection states, and accessible UI feedback.
How to Add a Tailwind Ring
Apply a ring with the ring-{width} class:
ring-0– No ring.ring-1– 1px ring.ring-2– 2px ring.ring– 3px ring (default).ring-4– 4px ring.ring-8– 8px ring.
<button class="ring-2 ring-blue-500 px-4 py-2 rounded-lg"> Ringed button</button>Preview
Ring Color
Change the ring color with ring-{color}:
<button class="ring-2 ring-red-500 px-4 py-2 rounded">Red ring</button><button class="ring-2 ring-green-500 px-4 py-2 rounded">Green ring</button><button class="ring-2 ring-blue-500 px-4 py-2 rounded">Blue ring</button>Preview
Ring Opacity
Control ring transparency with the opacity modifier:
<div class="ring-4 ring-blue-500/50 rounded-lg p-4"> 50% opacity ring</div>Ring Offset
Add space between the element and the ring with ring-offset-{width}:
| Class | Offset |
|-------|--------|
| ring-offset-0 | 0px |
| ring-offset-1 | 1px |
| ring-offset-2 | 2px |
| ring-offset-4 | 4px |
| ring-offset-8 | 8px |
<button class="ring-2 ring-blue-500 ring-offset-2 px-4 py-2 rounded-lg"> Ring with offset</button>Preview
Ring Offset Color
Customize the offset background color (useful on non-white backgrounds):
<div class="bg-gray-900 p-8 rounded-xl"> <button class="ring-2 ring-white ring-offset-2 ring-offset-gray-900 bg-white text-gray-900 px-4 py-2 rounded-lg"> Dark background ring </button></div>Focus Ring Pattern
The most common ring pattern — showing a ring on focus for accessibility:
<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-all"> Focus me (Tab)</button>
<input class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none border rounded-lg px-4 py-2" placeholder="Click or tab here"/>Preview
Inset Ring
Place the ring inside the element instead of outside:
<div class="ring-4 ring-inset ring-blue-500 rounded-lg p-4"> Inset ring</div>Responsive Rings
Apply ring styles at specific breakpoints:
<button class="md:focus:ring-2 md:focus:ring-blue-500 px-4 py-2 rounded"> Focus ring on medium+ screens</button>✏️ Arbitrary Value Usage
Use custom ring widths or colors:
<div class="ring-[3px] ring-[#ff6b6b]"> Custom ring width and color</div>Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
