Tailwind CSS 轮廓环偏移厚度

轮廓环偏移厚度

当添加轮廓环时，用于模拟偏移的功能类。

使用

使用 ​ring-offset-{width}​ 功能来模拟偏移，添加纯白色的盒状阴影，并增加相应的轮廓环的厚度以适应偏移。

<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 中，您不能真正地偏移一个方框阴影，所以我们必须使用一个与父背景色相匹配的纯色阴影来伪造它。我们默认使用白色，但是如果您在不同的背景色上添加一个环形偏移，您应该使用 ​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>

响应式

要控制特定断点处的环形偏移宽度，请在任何现有的环形偏移宽度功能中添加 ​{screen}:​ 前缀。例如，使用 ​md:ring-offset-4​ 来应用 ​ring-offset-4​ 功能，只适用于中等大小的屏幕及以上。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

自定义

您可以通过在您的 ​tailwind.config.js​ 文件的 ​theme ​部分的 ​ringOffsetWidth ​键下自定义您的环形偏移宽度功能。

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

在主题定制文档中了解更多关于定制默认主题的信息。

变体

默认情况下， 针对 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 ​属性设置为 ​false ​来完全禁用它们：

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