Краткая справка

Класс
Превью 
cursor-auto
cursor-default
cursor-pointer
cursor-wait
cursor-text
cursor-move
cursor-help
cursor-not-allowed
cursor-none
cursor-context-menu
cursor-progress
cursor-cell
cursor-crosshair
cursor-vertical-text
cursor-alias
cursor-copy
cursor-no-drop
cursor-grab
cursor-grabbing
cursor-all-scroll
cursor-col-resize
cursor-row-resize
cursor-n-resize
cursor-e-resize
cursor-s-resize
cursor-w-resize
cursor-ne-resize
cursor-nw-resize
cursor-se-resize
cursor-sw-resize
cursor-ew-resize
cursor-ns-resize
cursor-nesw-resize
cursor-nwse-resize
cursor-zoom-in
cursor-zoom-out

Основы использования

Установка стиля курсора

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

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

<button type="button" class="cursor-pointer ...">
  Отправить
</button>
<button type="button" class="cursor-progress ...">
  Сохранение...
</button>
<button type="button" disabled class="cursor-not-allowed ...">
  Подтвердитть
</button>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте focus:cursor-auto, чтобы применять утилиту cursor-auto только при focus.

<div class="cursor-not-allowed focus:cursor-auto">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:cursor-auto, чтобы применить утилиту cursor-auto только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.


Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind включает утилиты cursor для многих встроенных опций. Вы можете настроить эти значения, отредактировав theme.cursor или theme.extend.cursor в вашем файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Произвольные значения

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

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

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.