accent-color

示例

设置强调色

使用类似 accent-rose-500 和 accent-lime-600 这样的工具类来更改元素的强调色

<label>
  <input type="checkbox" checked />
  Browser default
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  Customized
</label>

这对于通过覆盖浏览器的默认颜色来样式化复选框和单选按钮组等元素非常有用。

更改不透明度

使用颜色不透明度修饰符来控制元素强调色的不透明度

<input class="accent-purple-500/25" type="checkbox" checked />
<input class="accent-purple-500/75" type="checkbox" checked />

设置强调色不透明度具有有限的浏览器支持，目前仅在 Firefox 中有效。

使用自定义值

使用 accent-[<value>] 语法 来设置强调色基于完全自定义的值

<input class="accent-[#50d71e] ..." type="checkbox" />

对于 CSS 变量，您还可以使用 accent-(<custom-property>) 语法

<input class="accent-(--my-accent-color) ..." type="checkbox" />

这只是一个简写形式，用于 accent-[var(<custom-property>)] 它会自动为您添加 var() 函数。

应用于悬停时

前缀一个 带有类似这样的变体的 accent-color 工具类 hover:* 仅在该状态下应用该工具类

<input class="accent-black hover:accent-pink-500" type="checkbox" />

在变体文档中了解更多关于使用变体的信息。

响应式设计

前缀一个 accent-color 工具类 带有断点变体（如 md:）以仅在以下情况下应用该工具类中等 屏幕尺寸及以上

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

在变体文档中了解更多关于使用变体的信息。

自定义您的主题

使用 --color-* 主题变量来自定义color 项目中的工具类

@theme {
  --color-regal-blue: #243c5a; 
}

现在 accent-regal-blue 工具类可以在您的标记中使用

<input class="accent-regal-blue" type="checkbox" />

在以下位置了解更多关于自定义主题的信息 主题文档.