Tailwind CSS - Outline Width

Creating Accessible Outlines with Tailwind CSS

Outline utilities control the width of an element’s outline. Unlike borders, outlines are drawn outside the element’s box model and do not take up layout space. This makes them the perfect tool for creating focus indicators that don’t cause your layout to shift.

Outline Width Utilities

Tailwind provides a numeric scale for outline widths. You can customize or extend this scale in your tailwind.config.js file.

Class	CSS Properties
outline-0	outline-width: 0px;
outline-1	outline-width: 1px;
outline-2	outline-width: 2px;
outline-4	outline-width: 4px;
outline-8	outline-width: 8px;

Best Practice: Accessible Focus Indicators

The most important use case for outlines is to provide clear visual feedback when an element is focused via keyboard navigation. Removing outlines without providing an alternative (outline-none) is a major accessibility failure.

Modern best practice uses the focus-visible variant. This applies the outline only during keyboard focus, not on mouse clicks, providing a cleaner experience for mouse users.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Accessible Outlines</title>
</head>
<body class="bg-slate-100 p-8 flex flex-col items-center space-y-6">
  <h2 class="text-2xl font-bold text-slate-800">Accessible Form</h2>
  <p>Try tabbing through these inputs with your keyboard.</p>

  <input type="text" placeholder="No custom focus... (browser default)"
         class="p-2 border border-gray-300 rounded-md w-72">

  <input type="text" placeholder="Bad: outline-none on focus"
         class="p-2 border border-gray-300 rounded-md w-72 focus:outline-none">

  <input type="text" placeholder="Good: custom focus outline"
         class="p-2 border border-gray-300 rounded-md w-72 focus:outline-none focus:ring-2 focus:ring-violet-500">

  <button class="px-6 py-2 bg-blue-600 text-white rounded-md
                   focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-400 focus-visible:ring-opacity-75">
    Click or Tab to Me
  </button>
</body>
</html>

Controlling Outline Style, Color, and Offset

Tailwind provides a full suite of utilities to work with outlines:

• Color: outline-red-500, outline-blue-500, etc.
• Style: outline-dashed, outline-dotted (Note: outline-solid is the default).
• Offset: outline-offset-2, outline-offset-4, etc., to create space between the element and its outline.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Styled Outlines</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="space-y-6">
    <div class="p-4 bg-white border-2 border-gray-400 rounded-lg
                 outline outline-4 outline-offset-2 outline-dashed outline-pink-500">
      A 4px dashed pink outline with a 2px offset.
    </div>
    <div class="p-4 bg-white border-2 border-gray-400 rounded-lg
                 focus-within:outline focus-within:outline-4 focus-within:outline-green-500 transition-all">
      <p>This container gets an outline when its children are focused.</p>
      <input type="text" class="mt-2 p-1 border rounded" placeholder="Focus me!">
    </div>
  </div>
</body>
</html>

Outline vs. Ring Utilities

Tailwind also includes ring-{width} utilities. They are very similar to outlines but are implemented using box-shadow.

• Use outline when: You need a simple, solid line that perfectly follows the element’s shape (border-radius) and doesn’t affect layout.
• Use ring when: You need a focus indicator that can be offset, blurred, or need to place the focus indicator inside the element’s padding (ring-inset). Rings are generally more flexible and are often preferred for modern focus styles.