当添加轮廓环时，用于模拟偏移的功能类。
<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} 功能来匹配父背景色。
bg-green-100
<div class="... bg-green-100">
<button class="... ring ring-green-600 ring-offset-4 ring-offset-green-100">
ring-offset-green-100
</button>
</div>更多信息，请参见 ringOffsetColor 文档。
要控制特定断点处的环形偏移宽度，请在任何现有的环形偏移宽度功能中添加 {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 property to false in the corePlugins section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ ringOffsetWidth: false,
}
}