Tailwind CSS Cursor Cheatsheet
Complete reference for all Tailwind v4 cursor utilities.
Hover each box to see the cursor in action. Click to copy.
General Cursors
Standard cursor types for common interactions like clicking, text selection, and indicating state.
Click & Drag Cursors
Cursors for draggable elements and scrollable areas.
Resize Cursors
Cursors indicating resize handles in various directions.
Zoom Cursors
Cursors for zoom controls on images and maps.
Common Use Cases
Buttons & Links
<button class="cursor-pointer"> Click me </button> <a href="#" class="cursor-pointer"> Link text </a>
Disabled States
<button class="cursor-not-allowed opacity-50" disabled > Disabled </button>
Draggable Elements
<div class="cursor-grab active:cursor-grabbing">
Drag me
</div>
{/* Or with React state */}
<div className={isDragging
? "cursor-grabbing"
: "cursor-grab"}>
Drag me
</div>Loading States
{/* Entire page loading */}
<div class="cursor-wait">
Loading content...
</div>
{/* Button loading */}
<button class="cursor-wait" disabled>
Processing...
</button>Resizable Elements
{/* Horizontal resize handle */}
<div class="cursor-col-resize w-1 h-full" />
{/* Corner resize handle */}
<div class="cursor-nwse-resize
absolute bottom-0 right-0
w-4 h-4" />Image Zoom
<img
src="photo.jpg"
class="cursor-zoom-in hover:scale-150"
/>
{/* Toggle zoom */}
<img
class={isZoomed
? "cursor-zoom-out"
: "cursor-zoom-in"}
/>Custom Cursor Images
You can use custom cursor images with Tailwind's arbitrary value syntax:
<div class="cursor-[url('/custom-cursor.png'),auto]">
Custom cursor element
</div>The second value (auto) is the fallback cursor if the image fails to load. Supported image formats: PNG, SVG, CUR, ICO.
Frequently Asked Questions
What cursor classes are available in Tailwind CSS?
Tailwind CSS provides 35+ cursor utilities including cursor-pointer, cursor-default, cursor-wait, cursor-text, cursor-move, cursor-not-allowed, cursor-grab, cursor-grabbing, and various resize cursors like cursor-col-resize and cursor-row-resize.
How do I make a button have a pointer cursor in Tailwind?
Add the cursor-pointer class to your button element. For example: <button class="cursor-pointer">Click me</button>. This shows the hand pointer cursor on hover, indicating the element is clickable.
How do I show a disabled cursor in Tailwind CSS?
Use the cursor-not-allowed class on disabled elements. Combine it with reduced opacity for a complete disabled look: <button class="cursor-not-allowed opacity-50" disabled>Disabled</button>
What is the difference between cursor-grab and cursor-grabbing?
cursor-grab shows an open hand cursor indicating an element can be grabbed, while cursor-grabbing shows a closed fist indicating the element is currently being dragged. Use cursor-grab by default and switch to cursor-grabbing during the drag operation.
Can I use a custom cursor image in Tailwind CSS?
Yes! Use arbitrary values with the cursor utility: cursor-[url(/path/to/cursor.png),auto]. The second value is the fallback cursor type if the image fails to load.
How do I hide the cursor completely?
Use the cursor-none class. This is useful for custom cursor implementations, fullscreen presentations, or game interfaces where you want to show a custom cursor element instead.
Quick Reference Table
| Class | CSS | Use For |
|---|---|---|
cursor-pointer | cursor: pointer; | Buttons, links, clickable elements |
cursor-not-allowed | cursor: not-allowed; | Disabled buttons, restricted actions |
cursor-grab | cursor: grab; | Draggable elements (idle state) |
cursor-grabbing | cursor: grabbing; | Draggable elements (active state) |
cursor-wait | cursor: wait; | Loading states, processing |
cursor-text | cursor: text; | Text inputs, selectable text |
cursor-move | cursor: move; | Moveable elements, drag handles |
cursor-col-resize | cursor: col-resize; | Column resize handles |
cursor-zoom-in | cursor: zoom-in; | Zoomable images, lightboxes |
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow