Tailwind CSS - 光标

Tailwind CSS - 光标

Tailwind CSS 中的 cursor 工具类允许您控制用户悬停在元素上时鼠标光标的外观。这对于提供视觉反馈并通过指示元素的交互性来改善用户体验 (UX) 至关重要。

现代开发环境设置

虽然您可以使用 Tailwind Play CDN 进行快速演示，但专业的设置涉及通过像 npm 或 yarn 这样的包管理器安装 Tailwind CSS。这允许进行全面的定制、通过清除（purging）未使用的样式进行性能优化，并集成到现代构建流程 (build pipelines) 中。

# 1. 通过 npm 安装 Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# 2. 在 `tailwind.config.js` 中配置您的模板路径
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 3. 将 Tailwind 指令添加到您的主 CSS 文件
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. 启动构建过程
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

光标工具类

以下是 Tailwind 光标工具类的完整列表。它们直接映射到标准的 CSS cursor 属性。

类名	CSS 属性	常见用例
cursor-auto	cursor: auto;	浏览器默认行为。
cursor-default	cursor: default;	平台相关的默认光标（通常是箭头）。
cursor-pointer	cursor: pointer;	指示链接或按钮等交互式元素。
cursor-wait	cursor: wait;	指示程序正在忙碌（例如，数据抓取期间）。
cursor-text	cursor: text;	指示可选择的文本。
cursor-move	cursor: move;	指示可移动的元素。
cursor-grab	cursor: grab;	指示可抓取的元素（如滑块）。
cursor-grabbing	cursor: grabbing;	指示元素当前正在被抓取。
cursor-not-allowed	cursor: not-allowed;	指示操作无法执行（例如，在禁用按钮上）。
cursor-help	cursor: help;	指示有帮助信息可用。
cursor-none	cursor: none;	隐藏光标，例如在信息亭或游戏界面中。请谨慎使用。
cursor-zoom-in	cursor: zoom-in;	指示元素可以放大。
cursor-zoom-out	cursor: zoom-out;	指示元素可以缩小。
cursor-*-resize	cursor: *-resize;	指示调整大小手柄（例如，cursor-nwse-resize）。

实际应用：组件状态

光标工具类的一个常见用例是反映组件的状态。例如，一个按钮可以有默认状态、加载状态和禁用状态，每种状态都使用不同的光标来向用户提供清晰的反馈。

示例：交互式按钮状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Cursor States</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="space-x-4">

    <!-- Default state -->
    <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 cursor-pointer">
      Click Me
    </button>

    <!-- Loading state -->
    <button class="px-6 py-3 bg-blue-400 text-white font-semibold rounded-lg shadow-md cursor-wait inline-flex items-center">
      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      Processing...
    </button>

    <!-- Disabled state -->
    <button class="px-6 py-3 bg-gray-400 text-gray-700 font-semibold rounded-lg shadow-md cursor-not-allowed" disabled>
      Cannot Click
    </button>

  </div>
</body>
</html>

响应式和状态变体

您可以使用 Tailwind 的响应式和状态变体前缀有条件地应用光标工具类。例如，仅在悬停时或在更大屏幕上更改光标。

• 悬停 (Hover)：hover:cursor-pointer 仅当元素被悬停时应用指针光标。
• 禁用 (Disabled)：disabled:cursor-not-allowed 是用于样式化禁用表单元素的常见模式。
• 响应式 (Responsive)：md:cursor-zoom-in 在中等屏幕及更大屏幕上应用放大光标。

最佳实践与可访问性 (a11y)

• 最少意外原则 (Principle of Least Astonishment)：仅在真正可点击的元素上使用 cursor-pointer。在静态文本上使用它可能会引起混淆。
• 避免使用 cursor-none：隐藏光标会严重影响鼠标和触控板用户的可用性。将其保留用于特定、受控的环境，例如全屏视频播放器或使用自定义准星的游戏。
• 与 ARIA 结合使用：当使用 cursor-not-allowed 时，请确保该元素也通过编程方式禁用（例如，在 <button> 上使用 disabled 属性），以便屏幕阅读器和键盘导航无法访问它。

自定义光标

如果您需要自定义光标，可以将其添加到 tailwind.config.js 文件中的 theme.extend.cursor 下。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(/path/to/fancy-cursor.cur), auto',
      }
    }
  }
}