Forced Color Adjust 强制颜色调整

选择是否强制使用颜色的实用工具。

Class	Properties

基本用法

选择退出强制颜色

使用 forced-color-adjust-none 来将元素排除在强制颜色模式强制的颜色之外。这在强制使用有限色板会降低可用性的情况下非常有用。

👆 尝试在您的开发者工具中模拟forced-colors: active，以查看更改

Basic Tee

$35

Choose a color

WhiteGrayBlack

<form>
  <img src="..." />
  <div>
    <h3>Basic Tee</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">Choose a color</legend>
      <div class="forced-color-adjust-none ...">
        <label >
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">White</span>
          <span class="size-6 rounded-full border border-black border-opacity-10 bg-white"></span>
        </label>
        <!-- ... -->
      </div>
    </fieldset>
</form>

您还可以使用 forced-colors 修饰符，在用户启用强制颜色模式时有条件地添加样式。

恢复强制颜色

使用 forced-color-adjust-auto 来撤销 forced-color-adjust-none ，使元素依从于强制颜色模式强制执行的颜色。

这在某些情况下可能很有用，比如在较大的屏幕尺寸上使用不同的控件

<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>Choose a color:</legend>
    <select class="hidden lg:block">
      <option value="White">White</option>
      <option value="Gray">Gray</option>
      <option value="Black">Black</option>
    </select>
    <div class="lg:hidden">
      <label>
        <input class="sr-only" type="radio" name="color-choice" value="White" />
        <!-- ... -->
      </label>
      <!-- ... -->
    </div>
  </fieldset>
</form>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 focus:forced-color-adjust-none 仅在焦点上应用 forced-color-adjust-none 实用程序。

<a href="#content" class="forced-color-adjust-none focus:forced-color-adjust-auto">
  Skip to content
</a>

有关所有可用状态修饰符的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，比如响应式断点、暗模式、偏好减少动画等。例如，使用 md:forced-color-adjust-auto 仅在中等屏幕尺寸及以上应用 forced-color-adjust-auto 实用程序。

<div class="forced-color-adjust-none md:forced-color-adjust-auto">
  <!-- ... -->
</div>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。