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.

    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.

    Outline - 图2

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

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

    1.   // tailwind.config.js
    3.     theme: {
    4.       extend: {
    5.         outline: {
    6.           blue: ['2px solid #0000ff', '1px'],
    7.         }
    8.       }
    9.   }

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

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

    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:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     outline: false,
    6.     }
    7.   }

     Pointer Events→