Outline

Utilities for controlling an element’s outline.

Default class reference

Remove 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-300 ..." />

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.

Dotted outlines

Use the outline-white and outline-black utilities to add a 2px dotted border around an element with a 2px offset. These are useful as an accessible general purpose custom focus style if you don’t want to design your own.

<button class="focus:outline-black ...">Button A</button>
<button class="focus:outline-white ...">Button B</button>

Customizing

Outlines

By default, Tailwind provides three outline utilities. You can customize these by editing the theme.outline section of your tailwind.config.js file.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: '2px solid #0000ff',
        }
      }
    }
  }

You can also provide an outline-offset value for any custom outline utilities using a tuple of the form [outline, outlineOffset]:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
    }
  }

Variants

By default, only responsive, focus-within and focus variants are generated for outline utilities.

You can control which variants are generated for the outline utilities by modifying the outline property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and active variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       outline: ['hover', 'active'],
      }
    }
  }

Disabling

If you don’t plan to use the outline utilities in your project, you can disable them entirely by setting the outline property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     outline: false,
    }
  }

←Cursor Pointer Events→

Edit this page on GitHub