「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Cursor

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

Default class reference

Class
屬性
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

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

tailwind.config.jsvariants 區塊中變更 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,
    }
  }