Cursor

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

Default

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

Pointer

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

Wait

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

Text

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

Move

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

Not Allowed

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

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

默認情況下, 只有 響應式 的 cursor 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 cursor 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       cursor: ['responsive', 'hover'],
      }
    }
  }

Disabling

如果你不打算在專案中使用 cursor 功能，可以在你的設定檔裡的 corePlugins 屬性中將 cursor 設定為 false 來停用功能：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     cursor: false,
    }
  }