1. Интерактивность
  2. cursor

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

cursor

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

ClassStyles
cursor-auto
cursor: auto;
cursor-default
cursor: default;
cursor-pointer
cursor: pointer;
cursor-wait
cursor: wait;
cursor-text
cursor: text;
cursor-move
cursor: move;
cursor-help
cursor: help;
cursor-not-allowed
cursor: not-allowed;
cursor-none
cursor: none;
cursor-context-menu
cursor: context-menu;

Примеры

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

Используйте утилиты типа cursor-pointer и cursor-grab для управления тем, какой курсор отображается при наведении на элемент:

Наведите на каждую кнопку, чтобы увидеть изменение курсора

<button class="cursor-pointer ...">Submit</button><button class="cursor-progress ...">Saving...</button><button class="cursor-not-allowed ..." disabled>Confirm</button>

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

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

<button class="cursor-[url(hand.cur),_pointer] ...">  <!-- ... --></button>

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

<button class="cursor-(--my-cursor) ...">  <!-- ... --></button>

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

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

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

<button class="cursor-not-allowed md:cursor-auto ...">  <!-- ... --></button>

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

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