Tailwind CSS Ring Cheatsheet

Q: What is the difference between focus: and focus-visible: in Tailwind?

focus: applies styles whenever an element receives focus (including mouse clicks). focus-visible: only applies styles when focus should be visible (keyboard navigation). Use focus-visible: for cleaner UX - rings show for keyboard users but not for mouse users.

Complete reference for ring utilities - essential for focus states and accessibility.
Rings help keyboard users see which element has focus.

Why Focus Rings Matter

Focus rings are critical for accessibility. They help users who navigate with keyboards, screen readers, or other assistive technologies understand which element is currently focused.

- Users with motor disabilities rely on keyboard navigation
- Screen reader users need visual focus indicators
- Power users often prefer keyboard shortcuts
- WCAG 2.1 requires visible focus indicators

Quick Navigation

Ring Width Ring Color Ring Offset Width Ring Offset Color Visual Examples Common Patterns Accessibility Tips FAQ

Ring Width

Control the width of the ring around an element. Rings are created using box-shadow.

Class	Width
`ring-0`	`0px`
`ring-1`	`1px`
`ring-2`	`2px`
`ring`	`3px (default)`
`ring-4`	`4px`
`ring-8`	`8px`
`ring-inset`	`inset`

Visual Examples

Box

ring-0

Box

ring-1

Box

ring-2

Box

ring

Box

ring-4

Box

ring-8

Ring Color

Set the color of the ring. Uses the same color palette as other Tailwind utilities.

Special Values

ring-inheritInherits from parent

ring-currentUses currentColor

ring-transparentTransparent ring

ring-black#000000

ring-white#ffffff

Color Scales

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Tip: Click any color swatch to copy the class name. You can also add opacity with ring-blue-500/50 for 50% opacity.

Ring Offset Width

Add a gap between the element and its ring. Creates a "floating" ring effect.

Class	Offset
`ring-offset-0`	`0px`
`ring-offset-1`	`1px`
`ring-offset-2`	`2px`
`ring-offset-4`	`4px`
`ring-offset-8`	`8px`

Visual Examples

ring-offset-00px gap

ring-offset-11px gap

ring-offset-22px gap

ring-offset-44px gap

ring-offset-88px gap

Ring Offset Color

Set the color of the ring offset (the gap). Important for dark backgrounds where the default white offset would be visible.

Special Values

ring-offset-inheritInherits from parent

ring-offset-currentUses currentColor

ring-offset-transparentTransparent offset

ring-offset-white#ffffff

ring-offset-black#000000

Why Ring Offset Color Matters

ring-offset-2 - offset is white by default

ring-offset-slate-900 - matches background

Ring offset colors use the same color palette as ring colors. Use ring-offset-{color}-{shade}.

Interactive Focus Examples

Press Tab to navigate through these elements and see the focus rings in action.

Buttons

Inputs

Common Patterns

Copy-paste ready patterns for focus states in your projects.

Basic Focus Ring

Standard focus ring for interactive elements

<button class="focus:ring-2 focus:ring-blue-500">
  Click me
</button>

Focus Visible (Recommended)

Only shows ring for keyboard navigation, not mouse clicks

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

With Ring Offset

Creates a gap between the element and the ring

<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Click me
</button>

Colored Offset

Match offset color to background for dark themes

<div class="bg-slate-900 p-4">
  <button class="focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900">
    Button on dark bg
  </button>
</div>

Inset Ring

Ring appears inside the element border

<input class="focus:ring-2 focus:ring-inset focus:ring-blue-500" />

Form Input Pattern

Common pattern for form inputs - hide border, show ring

<input class="border border-gray-300 rounded-md px-4 py-2
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Accessibility Best Practices

Follow these guidelines to ensure your focus states are accessible to all users.

Do

- Use focus-visible: for cleaner UX
- Ensure ring has sufficient contrast (3:1 minimum)
- Use ring-offset on dark backgrounds
- Test with keyboard navigation
- Keep focus rings visible at all times

Don't

- Never use outline-none without alternative
- Avoid removing focus styles entirely
- Don't use only color to indicate focus
- Don't make rings too thin to see (use ring-2+)
- Avoid low-contrast ring colors

focus: vs focus-visible:

focus: - Shows ring on any focus (keyboard + mouse clicks)

focus-visible: - Shows ring only when focus should be visible (typically keyboard navigation)

Recommendation: Use focus-visible: for buttons and links, focus: for inputs.

Frequently Asked Questions

What is the Tailwind ring utility?

Tailwind's ring utilities create outline-like rings around elements using box-shadow. Unlike outlines, rings are rendered using box-shadow which allows for more styling options like offsets and don't affect layout.

Why are focus rings important for accessibility?

Focus rings are essential for keyboard navigation accessibility. They provide a visual indicator showing which element currently has focus, helping users who navigate with keyboards or assistive technologies understand where they are on the page.

What is the difference between focus: and focus-visible: in Tailwind?

focus: applies styles whenever an element receives focus (including mouse clicks). focus-visible: only applies styles when focus should be visible (keyboard navigation). Use focus-visible: for cleaner UX - rings show for keyboard users but not for mouse users.

How do I use ring-offset in Tailwind?

Ring offset creates a gap between the element and the ring. Use ring-offset-{size} (like ring-offset-2) along with a ring utility. You can also set the offset color with ring-offset-{color} to match your background.

Can I use ring without a focus state?

Yes! While rings are commonly used with focus states, you can use them directly for decorative purposes. For example, ring-2 ring-blue-500 will always show a ring. This is useful for highlighting elements or creating visual effects.

What is ring-inset?

ring-inset makes the ring appear inside the element's border instead of outside. This is useful when you don't want the ring to extend beyond the element's boundaries or when working with inputs that have existing borders.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including focus states, rings, and accessibility utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →