輪廓

用于控制元素輪廓的功能類。

移除輪廓

使用 ?outline-none? 來隱藏焦點元素的默認瀏覽器輪廓。

強烈建議在使用這個功能時，應用您自己的焦點樣式來實現可訪問性。

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

?outline-none? 功能類是使用透明的輪廓（transparent outline）來實現的，以確保元素在 Windows 高對比度模式用戶看來仍有明顯的焦點。

點狀輪廓

使用 ?outline-white? 和 ?outline-black? 功能類在元素周圍添加一個 2px 的點狀邊框，并有 2px 的偏移。如果您不想設計自己的風格，這些功能類可以作為一種通用的自定義焦點風格。

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

自定義

Outlines

默認情況下，Tailwind 提供三個 Outline 實用程序。您可以通過編輯 ?tailwind.config.js? 文件的 ?theme.outline? 部分來自定義這些。

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

您也可以使用 ?[outline, outlineOffset]? 形式的元組為任何自定義的 outline 功能提供一個 ?outlineOffset ?(偏移)值。

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

變體

默認情況下， 針對 outline 功能類，只生成 responsive, focus-within and focus 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?outline ?屬性來控制為 outline 功能生成哪些變體。

例如，這個配置也將生成 hover and active 變體:

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

禁用

如果您不打算在您的項目中使用 outline 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?outline ?屬性設置為 ?false ?來完全禁用它們：

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