Outline

Usage

Use .outline-none to remove browser specific outlining of focused elements.

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

<input type="text"
  placeholder="Focus me (no outline)"
  class="outline-none ..." />

<input type="text"
  placeholder="Focus me (custom)"
  class="outline-none focus:shadow-outline focus:bg-blue-100 ..." />

Customizing

Responsive and pseudo-class variants

By default, only responsive 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: {
      // ...
-     outline: ['responsive', 'focus'],
+     outline: ['responsive', 'focus', '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,
    }
  }