无障碍
用于选择强制颜色的工具。
¥Basic usage
¥Opting out of forced colors
使用 forced-color-adjust-none
选择某个元素不使用 强制颜色模式 强制执行的颜色。这在强制使用有限的调色板会降低可用性的情况下非常有用。
¥Use forced-color-adjust-none
to opt an element out the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.
尝试模拟“forced-colors: active” 在你的开发者工具中查看更改
<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
修饰符 有条件地添加样式。
¥You can also use the forced-colors
modifier to conditionally add styles when the user has enabled a forced color mode.
¥Restoring forced colors
使用 forced-color-adjust-auto
撤消 forced-color-adjust-none
,使元素遵循强制颜色模式强制执行的颜色。
¥Use forced-color-adjust-auto
to undo forced-color-adjust-none
, making an element adhere to colors enforced by forced colors mode.
如果你在较大的屏幕尺寸上使用不同的控件,这会很有用,例如:
¥This can be useful if you use a different control on a larger screen size for example:
<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
仅在 focus 时应用 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>