Outline Style

Utilities for controlling the style of an element’s outline.

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

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

Focus the input to see the expected behaviour

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

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

For a complete list of all available state modifiers, check out the documentation.

To learn more, check out the documentation on , Dark Mode and .