Outline

Use 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.

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>

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
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
  }

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 file.

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

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

← Cursor