Cursor
The cursor class sets the cursor property. It controls what cursor style is displayed when hovering over an element.
Overview | CSS Shortcut class | Applied style |
cursor-default
| cursor: default;
|
cursor-copy
| cursor: copy;
|
cursor-grab
| cursor: grab;
|
cursor-help
| cursor: help;
|
cursor-move
| cursor: move;
|
cursor-not-allowed
| cursor: not-allowed;
|
cursor-pointer
| cursor: pointer;
|
cursor-text
| cursor: text;
|
cursor-zoom-in
| cursor: zoom-in;
|
cursor-zoom-out
| cursor: zoom-out;
|
Examples
Default
cursor-default
<a href="#" class="cursor-default">
When hovered over, this element displays the default
cursor.
</a>
Copy
cursor-copy
<a href="#" class="cursor-copy">
When hovered over, this element displays the copy cursor.
It indicates that the content can be copied.
</a>
Grab
cursor-grab
<a href="#" class="cursor-grab">
When hovered over, this element displays the grab cursor.
It indicates that the content can be grabbed.
</a>
Help
cursor-help
<a href="#" class="cursor-help">
When hovered over, this element displays the help cursor.
It indicates that more information is available.
</a>
Move
cursor-move
<a href="#" class="cursor-move">
When hovered over, this element displays the move cursor.
It indicates that the content can be dragged.
</a>
Not allowed
cursor-not-allowed
<a href="#" class="cursor-not-allowed">
When hovered over, this element displays the not allowed
cursor. It indicates that the action is not allowed.
</a>
Pointer
cursor-pointer
<a href="#" class="cursor-pointer">
When hovered over, this element displays the pointer
cursor. It indicates that the element is clickable.
</a>
Text
cursor-text
<a href="#" class="cursor-text">
When hovered over, this element displays the text cursor.
It indicates that text can be selected.
</a>
Zoom in
cursor-zoom-in
<a href="#" class="cursor-zoom-in">
When hovered over, this element displays the zoom in
cursor. It indicates the possibility to increase
magnification.
</a>
Zoom out
cursor-zoom-out
<a href="#" class="cursor-zoom-out">
When hovered over, this element displays the zoom out
cursor. It indicates the possibility to decrease
magnification.
</a>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are: xs: > 480pxsm: > 640pxmd: > 768pxlg: > 1024pxxl: > 1280px
<div class="xs:cursor-pointer ...">
...
</div>
Learn more about the responsive layout prefix.
Apply this style to specific states Use a state prefix to apply this class only to a specified interaction state. The available states are: <div class="hover:cursor-pointer ...">
...
</div>
Learn more about the state prefix. 2025-10-01