accent-color

示例

设置强调颜色

使用 accent-rose-500 和 accent-lime-600 等工具类来改变元素的强调颜色：

<label>
  <input type="checkbox" checked />
  浏览器默认
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  自定义
</label>

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

改变不透明度

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

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

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

使用自定义值

Use the accent-[<value>] syntax to set the 强调颜色 based on a completely custom value:

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

For CSS variables, you can also use the accent-(<custom-property>) syntax:

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

This is just a shorthand for accent-[var(<custom-property>)] that adds the var() function for you automatically.

在悬停时应用

Prefix an accent-color utility with a variant like hover:* to only apply the utility in that state:

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

Learn more about using variants in the variants documentation.

响应式设计

Prefix an accent-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

Use the --color-* theme variables to customize the color utilities in your project:

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

Now the accent-regal-blue utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.