1. Интерактивность
  2. accent-color

Интерактивность

accent-color

Утилиты для управления акцентным цветом элемента формы.

ClassStyles
accent-inherit
accent-color: inherit;
accent-current
accent-color: currentColor;
accent-transparent
accent-color: transparent;
accent-black
accent-color: var(--color-black); /* #000 */
accent-white
accent-color: var(--color-white); /* #fff */
accent-red-50
accent-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
accent-red-100
accent-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
accent-red-200
accent-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
accent-red-300
accent-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
accent-red-400
accent-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

Примеры

Установка акцентного цвета

Используйте утилиты, такие как 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.

Использование пользовательского значения

Используйте синтаксис accent-[<value>] , чтобы задать accent color на основе полностью пользовательского значения:

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

Для переменных CSS вы также можете использовать синтаксис: accent-(<custom-property>)

<input class="accent-(--my-accent-color) ..." type="checkbox" />

Это просто сокращение, accent-[var(<custom-property>)] которое автоматически добавляет функцию var().

Применение при наведении

Префикс an accent-color утилиты с вариантом, например hover:*, чтобы применить утилиту только в этом состоянии:

<input class="accent-black hover:accent-pink-500" type="checkbox" />

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

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

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

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

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

Кастомизация вашей темы

Используйте переменные темы --color-* для настройки утилит color в вашем проекте:

@theme {  --color-regal-blue: #243c5a; }

Теперь утилиту accent-regal-blue можно использовать в вашей разметке:

<input class="accent-regal-blue" type="checkbox" />

Подробнее о настройке темы читайте в документации темы.

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