光标效果

自动

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

默认

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

指向

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

等待

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

文本

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

移动

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

不允许

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

自定义

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 property to false in the corePlugins section of your config file:

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