askvity

How Do You Remove an Outline in Tailwind Forms?

Published in Tailwind CSS 2 mins read

To remove the default browser outline on focused elements in Tailwind forms, you use the outline-none utility class.

When a form element, like an input field, textarea, or button, receives focus (usually by clicking on it or tabbing to it), web browsers typically display a default outline. This outline helps users understand which element is currently active, which is important for accessibility, particularly for keyboard navigation. However, this default outline might sometimes clash with your design.

Using the outline-none Utility

According to the documentation, you can hide this default browser outline by applying the outline-none class directly to the form element you want to modify.

<input type="text" class="outline-none border border-gray-300 focus:border-blue-500 p-2" placeholder="Enter text here">

<button class="outline-none bg-blue-500 text-white p-2 rounded">Click Me</button>

In these examples, the outline-none class is added alongside other styling classes.

What outline-none Does

The outline-none class is a simple Tailwind utility that sets the CSS outline property to none.

Tailwind Class CSS Property Value Description
outline-none outline none Hides the default browser outline on focus.

Accessibility Considerations

While outline-none effectively removes the visual outline, it's crucial to consider accessibility (WCAG guidelines). Removing the default focus indicator can make it difficult for users who rely on keyboard navigation to see which element is currently focused.

If you remove the default outline, it is highly recommended that you provide an alternative visual indicator for focus. Tailwind offers utilities specifically for styling elements when they are focused:

  • focus:ring-{color}-{width}: Adds a focus ring (e.g., focus:ring-blue-500 focus:ring-2)
  • focus:border-{color}-{width}: Changes the border color and/or width on focus (e.g., focus:border-blue-500 focus:border-2)
  • focus:shadow-{size}: Adds a shadow on focus (e.g., focus:shadow-outline-blue)

Here's an example of removing the default outline but adding a custom focus ring:

<input
  type="text"
  class="outline-none border border-gray-300 focus:ring-blue-500 focus:ring-2 p-2 rounded"
  placeholder="Enter text here (custom focus ring)"
>

This approach ensures that you achieve the desired look while maintaining usability for all users.

In summary, use the outline-none class to remove the default outline, but always supplement it with a custom focus style for accessibility.

Related Articles