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

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

caret-color

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

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

Примеры

Базовый пример

Используйте утилиты типа caret-rose-500 и caret-lime-600 для изменения цвета курсора ввода текста:

Сфокусируйтесь на текстовом поле, чтобы увидеть новый цвет курсора

<textarea class="caret-pink-500 ..."></textarea>

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

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

<textarea class="caret-[#50d71e] ..."></textarea>

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

<textarea class="caret-(--my-caret-color) ..."></textarea>

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

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

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

<textarea class="caret-rose-500 md:caret-lime-600 ..."></textarea>

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

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

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

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

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

<textarea class="caret-regal-blue"></textarea>

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

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