Tailwind CSS 輪廓

輪廓

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

移除輪廓

使用 ?outline-none? 來隱藏焦點(diǎn)元素的默認(rèn)瀏覽器輪廓。

強(qiáng)烈建議在使用這個(gè)功能時(shí)，應(yīng)用您自己的焦點(diǎn)樣式來實(shí)現(xiàn)可訪問性。

<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）來實(shí)現(xiàn)的，以確保元素在 Windows 高對比度模式用戶看來仍有明顯的焦點(diǎn)。

點(diǎn)狀輪廓

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

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

自定義

Outlines

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

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

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

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

變體

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

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

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

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

禁用

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

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