Tailwind CSS on GitHub

Cursor

Utilities for controlling the cursor style when hovering over an element.

Default class reference

Class
Properties
cursor-autocursor: auto;
cursor-defaultcursor: default;
cursor-pointercursor: pointer;
cursor-waitcursor: wait;
cursor-textcursor: text;
cursor-movecursor: move;
cursor-helpcursor: help;
cursor-not-allowedcursor: not-allowed;

Auto

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).

Hover over this text
<div class="cursor-auto ...">
  Hover over this text
</div>

Default

Use cursor-default to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).

Hover over this text
<div class="cursor-default ...">
  Hover over this text
</div>

Pointer

Use cursor-pointer to change the mouse cursor to indicate an interactive element (usually a pointing hand).

Hover me
<div class="cursor-pointer ...">
  Hover me
</div>

Wait

Use cursor-wait to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).

Hover me
<div class="cursor-wait ...">
  Hover me
</div>

Text

Use cursor-text to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).

Hover me
<div class="cursor-text ...">
  Hover me
</div>

Move

Use cursor-move to change the mouse cursor to indicate something that can be moved.

Hover me
<div class="cursor-move ...">
  Hover me
</div>

Not Allowed

Use cursor-not-allowed to change the mouse cursor to indicate something can not be interacted with or clicked.

Hover me
<div class="cursor-not-allowed ...">
  Hover me
</div>

Customizing

Cursors

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',
      }
    }
  }

Variants

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'],
      }
    }
  }

Disabling

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,
    }
  }