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.