Утилиты для управления стилем курсора при наведении курсора на элемент.
Используйте cursor-auto, чтобы позволить браузеру изменять курсор в зависимости от текущего содержимого (например, автоматически менять курсор на text при наведении курсора на текст).
<div class="cursor-auto ...">
Наведите курсор на этот текст
</div>Используйте cursor-default, чтобы изменить курсор мыши, чтобы всегда использовать курсор по умолчанию, зависящий от платформы (обычно стрелку).
<div class="cursor-default ...">
Наведите курсор на этот текст
</div>Используйте cursor-pointer, чтобы изменить курсор мыши, чтобы указать интерактивный элемент (обычно указывающую руку).
<div class="cursor-pointer ...">
Наведи на меня
</div>Используйте cursor-wait, чтобы изменить курсор мыши, чтобы указать, что что-то происходит в фоновом режиме (обычно это песочные часы или часы).
<div class="cursor-wait ...">
Наведи на меня
</div>Используйте cursor-text, чтобы изменить курсор мыши, чтобы указать, что текст может быть выбран (обычно двутавровая форма).
<div class="cursor-text ...">
Наведи на меня
</div>Используйте cursor-move, чтобы изменить курсор мыши, чтобы указать что-то, что можно переместить.
<div class="cursor-move ...">
Наведи на меня
</div>Используйте cursor-not-allowed, чтобы изменить курсор мыши, чтобы указать, что с чем-то нельзя взаимодействовать или щелкать.
<div class="cursor-not-allowed ...">
Наведи на меня
</div>По умолчанию Tailwind предоставляет шесть утилит cursor. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.cursor вашей конфигурации Tailwind.
// tailwind.config.js
module.exports = {
theme: {
cursor: {
auto: 'auto',
default: 'default',
pointer: 'pointer',
- wait: 'wait',
text: 'text',
- move: 'move',
'not-allowed': 'not-allowed',
+ crosshair: 'crosshair',
+ 'zoom-in': 'zoom-in',
}
}
}По умолчанию, только responsive варианты создаются для утилит cursor.
Вы можете контролировать, какие варианты создаются для утилит cursor для изменения свойства cursor в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ cursor: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения cursor, Вы можете полностью отключить их, установив для cursor свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ cursor: false,
}
}