Tailwind CSS 輪廓環(huán)厚度

輪廓環(huán)厚度

用于創(chuàng)建帶盒狀陰影的輪廓環(huán)的功能類。

使用

使用 ?ring-{width}? 功能來為元素應(yīng)用特定厚度的實心盒狀陰影。 環(huán)默認(rèn)為半透明的藍(lán)色，類似于許多系統(tǒng)中默認(rèn)的焦點(diǎn)環(huán)樣式。

<button class="... ring-0">ring-0</button>
<button class="... ring-2">ring-2</button>
<button class="... ring">ring</button>
<button class="... ring-4">ring-4</button>

Ring 功能與常規(guī)的 ?shadow-{size}? 功能優(yōu)雅地組合在一起，并且可以在同一個元素上組合。

您還可以使用 ?ringColor?、 ?ringOpacity ?和 ?ringOffsetWidth ?等功能來控制環(huán)的顏色、不透明度和偏移。

Focus rings（聚焦環(huán)）

默認(rèn)情況下，?focus ?變體是為 ?ring-{width}? 功能啟用的，這使得通過在任何 ?ring-{width}? 功能的開頭添加 ?focus:?，可以很容易地將其用于自定義焦點(diǎn)樣式。

<button class="... focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">
  Button
</button>

默認(rèn)情況下，?ringColor?、?ringOpacity?、?ringOffsetWidth ?和 ?ringOffsetColor ?等功能都啟用了 ?focus ?變量。

Inset rings (內(nèi)嵌環(huán))

使用 ?ring-inset? 功能來強(qiáng)制在元素的內(nèi)部而不是外部渲染一個環(huán)。這對于位于屏幕邊緣，環(huán)的一部分不可見的的元素來說是很有用的。

<button class="... ring-4 ring-pink-300">
  Default
</button>

<button class="... ring-4 ring-pink-300 ring-inset">
  Inset
</button>

響應(yīng)式

要控制特定斷點(diǎn)的環(huán)寬，請在任何現(xiàn)有的環(huán)寬功能中添加 ?{screen}:? 前綴。例如，使用 ?md:ring-4? 來應(yīng)用 ?ring-4? 功能，只適用于中等尺寸以上的屏幕。

<button class="ring-2 md:ring-4">
  <!-- ... -->
</button>

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息，請查看響應(yīng)式設(shè)計文檔。

自定義

要自定義生成環(huán)形寬度的功能，請在您的 ?tailwind.config.js? 文件的 ?theme ?部分的 ?ringWidth ?鍵下添加您的自定義值。您可以使用 ?DEFAULT ?鍵來指定哪種寬度用于普通的 ?ring ?功能類。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringWidth: {
        'DEFAULT': '2px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}

在主題定制文檔中了解更多關(guān)于定制默認(rèn)主題的信息。

變體

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

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

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

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

禁用

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

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