Tailwind CSS on GitHub

光标效果

当鼠标悬停在一个元素上时,用于控制光标样式的功能类。

Default class reference

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

自动

使用 cursor-auto 允许浏览器根据当前的内容改变光标(例如,当鼠标悬停在文本上时,自动变为 text 光标)。

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

默认

使用 cursor-default 来改变鼠标光标,使其始终使用依赖于平台的默认光标(通常是一个箭头)。

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

指向

使用 cursor-pointer 来改变鼠标光标来表示一个交互式元素(通常是一个指向性的手)。

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

等待

使用 cursor-wait 来改变鼠标光标,以表示背景中正在发生的事情(通常是沙漏或手表)。

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

文本

使用 cursor-text 来改变鼠标光标,表示可以选择文本(通常是一个 I 字形)。

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

移动

使用 cursor-move 来改变鼠标光标,表示可以移动的东西。

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

不允许

使用 cursor-not-allowed 来改变鼠标光标,表示不能与之交互或点击。

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

自定义

Cursors

默认情况下,Tailwind 提供了六个 cursor 功能。您可以通过编辑您的 Tailwind 配置中的 theme.cursor 部分来改变,添加或删除这些功能。

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

变体

默认情况下, 针对 cursor 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 cursor 属性来控制为 cursor 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

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

禁用

如果您不打算在您的项目中使用 cursor 功能,您可以通过在配置文件的 corePlugins 部分将 cursor 属性设置为 false 来完全禁用它们:

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