Tailwind CSS Outline

The outline-* utilities in Tailwind CSS control the outline around elements. Outlines are similar to borders but don't take up space in the layout. They're most commonly used for focus indicators to make interactive elements accessible.

How to Set Tailwind Outline

Apply an outline with outline-{width} and outline-{color}:

• outline-none – Removes the outline entirely.
• outline – Default outline (2px).
• outline-1 – 1px outline.
• outline-2 – 2px outline.
• outline-4 – 4px outline.
• outline-8 – 8px outline.

<button class="outline outline-2 outline-blue-500 px-4 py-2 rounded-lg">
  Outlined button
</button>

Preview

Outline Style

Control the outline appearance with style classes:

| Class | Style | |-------|-------| | outline | Default solid outline | | outline-dashed | Dashed outline | | outline-dotted | Dotted outline | | outline-double | Double outline | | outline-none | No outline |

<div class="outline-dashed outline-2 outline-blue-500 p-4 rounded">
  Dashed outline
</div>

Preview

Outline Color

Set the outline color with outline-{color}:

<button class="outline outline-2 outline-red-500 px-4 py-2 rounded">Red outline</button>
<button class="outline outline-2 outline-green-500 px-4 py-2 rounded">Green outline</button>

Outline Offset

Control the space between the element and its outline with outline-offset-{width}:

| Class | Offset | |-------|--------| | outline-offset-0 | 0px | | outline-offset-1 | 1px | | outline-offset-2 | 2px | | outline-offset-4 | 4px | | outline-offset-8 | 8px |

<button class="outline outline-2 outline-blue-500 outline-offset-4 px-4 py-2 rounded">
  Offset outline
</button>

Preview

Focus Outline Pattern

The standard accessible focus pattern:

<button class="focus:outline focus:outline-2 focus:outline-blue-500 focus:outline-offset-2 bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">
  Tab to focus
</button>

Removing Default Outlines

When using custom focus styles (like ring-*), you often need to remove the browser's default outline:

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 bg-blue-600 text-white px-4 py-2 rounded-lg">
  Custom focus ring
</button>

Warning: Never use outline-none without providing an alternative focus indicator. This breaks keyboard accessibility.

Responsive Outlines

Apply outlines at specific breakpoints:

<div class="outline-none md:outline md:outline-2 md:outline-blue-500">
  Outline visible on medium+ screens
</div>

✏️ Arbitrary Value Usage

Use custom outline widths or colors:

<div class="outline-[3px] outline-[#ff6b6b] outline-offset-[6px]">
  Custom outline
</div>