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

輪廓環(huán)偏移厚度

當添加輪廓環(huán)時，用于模擬偏移的功能類。

使用

使用 ?ring-offset-{width}? 功能來模擬偏移，添加純白色的盒狀陰影，并增加相應(yīng)的輪廓環(huán)的厚度以適應(yīng)偏移。

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

改變偏移顏色

在 CSS 中，您不能真正地偏移一個方框陰影，所以我們必須使用一個與父背景色相匹配的純色陰影來偽造它。我們默認使用白色，但是如果您在不同的背景色上添加一個環(huán)形偏移，您應(yīng)該使用 ?ring-offset-{color}? 功能來匹配父背景色。

<div class="... bg-green-100">
  <button class="... ring ring-green-600 ring-offset-4 ring-offset-green-100">
    ring-offset-green-100
  </button>
</div>

響應(yīng)式

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

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

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

自定義

您可以通過在您的 ?tailwind.config.js? 文件的 ?theme ?部分的 ?ringOffsetWidth ?鍵下自定義您的環(huán)形偏移寬度功能。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringOffsetWidth: {
        '3': '3px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}

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

變體

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

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

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

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

禁用

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

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