Tailwind CSS 光标效果

光标效果

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

自动

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

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

默认

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

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

指向

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

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

等待

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

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

文本

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

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

移动

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

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

不允许

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

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

自定义

光标

默认情况下，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,
    }
  }