Utilities for controlling the cursor style when hovering over an element.
Use cursor-auto
to allow the browser to change the cursor based on the current content (e.g. automatically change to text
cursor when hovering over text).
<div class="cursor-auto ...">
Hover over this text
</div>
Use cursor-default
to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).
<div class="cursor-default ...">
Hover over this text
</div>
Use cursor-pointer
to change the mouse cursor to indicate an interactive element (usually a pointing hand).
<div class="cursor-pointer ...">
Hover me
</div>
Use cursor-wait
to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).
<div class="cursor-wait ...">
Hover me
</div>
Use cursor-text
to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).
<div class="cursor-text ...">
Hover me
</div>
<div class="cursor-move ...">
Hover me
</div>
Use cursor-not-allowed
to change the mouse cursor to indicate something can not be interacted with or clicked.
<div class="cursor-not-allowed ...">
Hover me
</div>
By default Tailwind provides six cursor
utilities. You change, add, or remove these by editing the theme.cursor
section of your Tailwind config.
// 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',
}
}
}
By default, only responsive variants are generated for cursor utilities.
You can control which variants are generated for the cursor utilities by modifying the cursor
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ cursor: ['hover', 'focus'],
}
}
}
If you don't plan to use the cursor utilities in your project, you can disable them entirely by setting the cursor
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ cursor: false,
}
}