Курсор

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

Класс	Свойства	Превью
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-progress	cursor: progress;
cursor-cell	cursor: cell;
cursor-crosshair	cursor: crosshair;
cursor-vertical-text	cursor: vertical-text;
cursor-alias	cursor: alias;
cursor-copy	cursor: copy;
cursor-no-drop	cursor: no-drop;
cursor-grab	cursor: grab;
cursor-grabbing	cursor: grabbing;
cursor-all-scroll	cursor: all-scroll;
cursor-col-resize	cursor: col-resize;
cursor-row-resize	cursor: row-resize;
cursor-n-resize	cursor: n-resize;
cursor-e-resize	cursor: e-resize;
cursor-s-resize	cursor: s-resize;
cursor-w-resize	cursor: w-resize;
cursor-ne-resize	cursor: ne-resize;
cursor-nw-resize	cursor: nw-resize;
cursor-se-resize	cursor: se-resize;
cursor-sw-resize	cursor: sw-resize;
cursor-ew-resize	cursor: ew-resize;
cursor-ns-resize	cursor: ns-resize;
cursor-nesw-resize	cursor: nesw-resize;
cursor-nwse-resize	cursor: nwse-resize;
cursor-zoom-in	cursor: zoom-in;
cursor-zoom-out	cursor: zoom-out;

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

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

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

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

<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 value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

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

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