Tailwind CSS on GitHub

轮廓环偏移厚度

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

Default class reference

Class
Properties
ring-offset-0--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-1--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-2--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-4--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);
ring-offset-8--tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);

使用

使用 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>

Changing the offset color(改变偏移颜色)

在 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 属性设置为 false 来完全禁用它们:

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