Tailwind CSS Cursor

The cursor-* utilities in Tailwind CSS control what the mouse cursor looks like when hovering over an element. Getting cursor styles right is one of those small UX details that makes a big difference — the right cursor tells users what an element does before they interact with it.

How to Set Tailwind Cursor

Apply a cursor style with the cursor-{style} class. Tailwind includes all standard CSS cursor values:

• cursor-auto – Browser decides the cursor based on context.
• cursor-default – Standard arrow cursor.
• cursor-pointer – Hand icon, signals a clickable element.
• cursor-wait – Spinner or hourglass, indicates loading.
• cursor-text – I-beam, signals text is selectable.
• cursor-move – Four-way arrow, signals a draggable element.
• cursor-not-allowed – Circle with a line, signals a disabled action.

1<button class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded">
2  Click me
3</button>

All Tailwind Cursor Classes

Here's a complete reference table of every cursor utility in Tailwind CSS:

| Class | CSS Property | When to Use | |-------|-------------|-------------| | cursor-auto | cursor: auto | Let the browser decide | | cursor-default | cursor: default | Non-interactive elements | | cursor-pointer | cursor: pointer | Buttons, links, clickable items | | cursor-wait | cursor: wait | Loading states | | cursor-text | cursor: text | Editable text areas | | cursor-move | cursor: move | Draggable elements | | cursor-help | cursor: help | Tooltips, help icons | | cursor-not-allowed | cursor: not-allowed | Disabled buttons, restricted actions | | cursor-none | cursor: none | Custom cursors, games | | cursor-context-menu | cursor: context-menu | Right-click menus | | cursor-progress | cursor: progress | Background processing | | cursor-cell | cursor: cell | Spreadsheet-like selections | | cursor-crosshair | cursor: crosshair | Precision selection tools | | cursor-vertical-text | cursor: vertical-text | Vertical text selection | | cursor-alias | cursor: alias | Shortcut creation | | cursor-copy | cursor: copy | Copy actions | | cursor-no-drop | cursor: no-drop | Invalid drop targets | | cursor-grab | cursor: grab | Grabbable elements | | cursor-grabbing | cursor: grabbing | Active drag state | | cursor-all-scroll | cursor: all-scroll | Scrollable containers | | cursor-col-resize | cursor: col-resize | Column resizing | | cursor-row-resize | cursor: row-resize | Row resizing | | cursor-n-resize | cursor: n-resize | North (top) edge resize | | cursor-e-resize | cursor: e-resize | East (right) edge resize | | cursor-s-resize | cursor: s-resize | South (bottom) edge resize | | cursor-w-resize | cursor: w-resize | West (left) edge resize | | cursor-nesw-resize | cursor: nesw-resize | Diagonal resize | | cursor-nwse-resize | cursor: nwse-resize | Diagonal resize | | cursor-zoom-in | cursor: zoom-in | Zoomable images | | cursor-zoom-out | cursor: zoom-out | Zoom out action |

Disabled Button Pattern

One of the most common uses of cursor utilities is pairing cursor-not-allowed with reduced opacity on disabled buttons:

1<button class="cursor-not-allowed opacity-50 bg-gray-400 text-white px-4 py-2 rounded">
2  Disabled
3</button>
4
5<button class="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
6  Active
7</button>

Drag and Drop Cursor

For drag-and-drop interfaces, combine cursor-grab and cursor-grabbing:

1<div class="cursor-grab active:cursor-grabbing bg-white border rounded-lg p-4 shadow-sm">
2  Drag me around
3</div>

Responsive Cursor

Like other Tailwind utilities, cursor classes support responsive prefixes:

1<div class="cursor-default md:cursor-pointer">
2  Clickable only on desktop
3</div>

✏️ Arbitrary Value Usage

Need a custom cursor image? Use arbitrary values:

1<div class="cursor-[url('/custom-cursor.png'),_auto]">
2  Custom cursor element
3</div>

This lets you use any CSS cursor value, including custom cursor images with fallbacks.

Conditional Cursors

Use state variants like hover:, focus:, and disabled: to change cursors based on interaction:

1<input
2  class="cursor-text focus:cursor-auto disabled:cursor-not-allowed"
3  type="text"
4  placeholder="Type here..."
5/>