Tailwind 的 cursor 类名直接生效，本质是内联 style 的快捷映射；常见失效原因是 pointer-events: none 或元素不可交互；需结合语义化标签、无障碍支持与实际交互能力使用。
cursor类名直接生效，不需要额外CSS
Tailwind 的 cursor- 系列工具类是原生支持的，写上就起作用，不依赖伪类、JS 或额外样式表。它本质就是内联 style="cursor: pointer" 的快捷映射，所以不存在“为什么没生效”的常见困惑——只要类名拼写正确、没被更高优先级的 !important 覆盖，它一定生效。
常见错误现象：cursor-pointer 加了但鼠标还是箭头，大概率是父元素（比如 div）设置了 pointer-events: none，或者该元素本身不可交互（如未设 tabindex 且非可聚焦元素），导致系统忽略 cursor 设置。
-
cursor-default：还原系统默认箭头（不是“无样式”，而是显式重置） -
cursor-not-allowed：禁用态，注意它不会自动禁用点击行为，只是视觉提示 -
cursor-move和cursor-grab在拖拽场景中语义不同：前者表示“正在移动”，后者表示“可以抓取”，用户心理预期有差异
hover:cursor-* 必须配合可交互元素使用
单纯写 hover:cursor-pointer 在 div 上，浏览器可能不触发 hover，尤其在移动端或无障碍模式下。这不是 Tailwind 的问题，而是 HTML 语义缺失导致的渲染行为差异。
使用场景明确时才加 hover 变体：比如按钮文字颜色不变，但悬停时才显示手型；或者卡片整体可点击，但只在悬停时暴露 cursor 提示。
立即学习“前端免费学习笔记（深入）”；
- 如果元素本身是
<button></button>或带role="button"的div，hover:cursor-pointer更可靠 - 避免对
span或纯文本节点加hover:cursor-pointer，它们没有 hover 触发区（尤其在 Safari 中） -
cursor-wait不建议用 hover 触发，它更适合 JS 控制：操作开始时加，结束时移除
自定义 cursor 值需手动扩展 theme
Tailwind 默认不支持 cursor: url(...), auto 这类自定义光标，也不能直接写 cursor-[url('/icon.cur')] —— 它会解析失败，生成无效 CSS。
参数差异在于：内置类对应的是标准关键字（default、text、zoom-in 等），而自定义光标属于 URL + fallback 组合值，必须进配置。
- 在
tailwind.config.js的theme.extend.cursor下添加键值对，例如：{ 'custom': 'url(/cursor.png), auto' } - 然后才能用
cursor-custom类名 - 注意路径是相对于构建输出目录（如
dist），不是源码目录；本地开发时容易 404
移动端和无障碍兼容性常被忽略
cursor 是桌面端视觉反馈机制，在触摸设备上基本无意义。但更关键的是：屏幕阅读器不感知 cursor 变化，也不会因 cursor-pointer 自动把元素识别为可操作项。
性能影响几乎为零，但它会误导开发者以为“加了手型 = 用户知道能点”——其实不能替代语义化标签和键盘可访问性。
- 可点击区域必须有明确角色：用
button、a，或至少加role="button" tabindex="0" -
cursor-none在游戏或绘图类 UI 中有用，但会破坏所有指针反馈，包括系统级右键菜单触发区 - 某些 Linux 桌面环境对
cursor-context-menu支持不稳定，实际表现可能退化为default
真正难处理的不是怎么写类名，而是判断“这个元素到底该不该有 cursor 反馈”——它永远要跟着交互能力走，而不是跟着设计师稿子走。
