1. Доступность
  2. forced-color-adjust

Доступность

forced-color-adjust

Утилиты для включения и исключения принудительных цветов.

ClassStyles
forced-color-adjust-auto
forced-color-adjust: auto;
forced-color-adjust-none
forced-color-adjust: none;

Примеры

Исключение принудительных цветов

Используйте утилиту forced-color-adjust-none для исключения элемента из цветов, навязываемых режимом принудительных цветов. Это полезно в ситуациях, когда навязывание ограниченной цветовой палитры ухудшит удобство использования.

Попробуйте эмулировать `forced-colors: active` в инструментах разработчика, чтобы увидеть изменения

Two each of gray, white, and black shirts laying flat.

Basic Tee

$35

Choose a color
<form>  <img src="/img/shirt.jpg" />  <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/10 bg-white"></span>        </label>        <!-- ... -->      </div>    </fieldset>  </div></form>

Вы также можете использовать вариант принудительных цветов для условного добавления стилей, когда пользователь включил режим принудительных цветов.

Восстановление принудительных цветов

Используйте утилиту forced-color-adjust-auto для того, чтобы элемент следовал цветам, навязываемым режимом принудительных цветов:

<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>

Это может быть полезно, если вы хотите отменить утилиту forced-color-adjust-none, например, на экране большего размера.

Адаптивный дизайн

Префикс a forced-color-adjust утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков