「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Outline

Utilities for controlling an element's outline.

Default class reference

Class
屬性
outline-noneoutline: 2px solid transparent; outline-offset: 2px;
outline-whiteoutline: 2px dotted white; outline-offset: 2px;
outline-blackoutline: 2px dotted black; outline-offset: 2px;

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

默認情況下, 只有 響應式、focus-within 和 focus 的 outline 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 outline 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 outline 功能,可以在你的設定檔裡的 corePlugins 屬性中將 outline 設定為 false 來停用功能:

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