Outline Style

​

Basic usage

​

Setting the outline style

Use the outline-{style} utilities to change the style of an element’s outline.

<button class="outline outline-2  outline-offset-2 ...">Button A</button>
<button class="outline-dashed outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-dotted outline-2 outline-offset-2 ...">Button C</button>
<button class="outline-double outline-3 outline-offset-2 ...">Button D</button>

​

Removing outlines

Use outline-none to hide the default browser outline on focused elements.

It is highly recommended to apply your own focus styling for accessibility when using this utility.

<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="focus:outline-none focus:ring focus:border-blue-500 ..." />

The outline-none utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to Windows high contrast mode users.

​

Applying conditionally

​

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:outline-dashed to only apply the outline-dashed utility on hover.

<div class="outline hover:outline-dashed">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:outline-dashed to apply the outline-dashed utility at only medium screen sizes and above.

<div class="outline md:outline-dashed">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.