强调色

​基础用法

​设置强调色

使用 accent-* 实用程序更改元素的强调色。通过覆盖浏览器的默认颜色，这有助于设计复选框和单选按钮组等元素的样式。

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

​更改不透明度

虽然可以使用颜色不透明度修饰符来控制强调色的不透明度，但 rgba() alpha 值目前仅在 Firefox 中受支持*（上次测试时间为 2021 年 11 月）*。

<input type="checkbox" class="accent-emerald-500/25" checked> Emerald

​按条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:accent-pink-500 来仅 在 hover应用 accent-pink-500.

<input type="checkbox" class="accent-pink-300 focus:accent-pink-500" checked>

请注意，虽然可以使用hover和active修饰符设置强调色，但最终的颜色会与您设置的颜色略有不同，因为浏览器会自动调整这两种状态下强调色的亮度。

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:accent-pink-500 来应用 accent-pink-500 程序，适用于中等屏幕尺寸及以上。

<input type="checkbox" class="accent-pink-300 md:accent-pink-500" checked>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

​使用自定义值

​定制你的主题

By default, Tailwind makes the entire default color palette available as accent colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your accent colors by editing theme.accentColor or theme.extend.accentColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

​任意值

如果您需要使用一次性的 accent-color值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

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

进一步了解，请参考 任意值 文档.