tailwind的cursor类直接映射内联style且必生效，失效主因是pointer-events: none、元素不可交互或语义缺失；自定义光标须配置theme.extend.cursor并设fallback，移动端及无障碍场景下cursor价值有限。
直接用 cursor 属性就能控制，不需要 JS 或额外库；但加了没反应、自定义光标不显示、移动端无效——这些才是真问题。
cursor 值选错导致交互意图混乱
用户看到光标才决定要不要点，选错值等于误导。比如把按钮设成 text，用户会下意识去选中文本；设成 move 却没实现拖拽逻辑，反而引发困惑。
-
pointer专用于可点击元素（a、button、带onclick的div），不是所有“看起来像按钮”的地方都该用 -
not-allowed只是视觉提示，不会禁用点击——必须配合disabled或pointer-events: none -
grab和grabbing是成对出现的：悬停时用grab，按下拖动时用 JS 切换为grabbing，单独写一个没意义 -
wait在部分 Chrome/Firefox 版本中已退化为普通箭头，如需强等待反馈，建议改用progress或自定义url()
自定义 cursor 图片不生效的常见原因
不是路径写错那么简单。浏览器对 url() 的加载、解析、渲染有多个隐性关卡。
- 必须提供 fallback：写法只能是
cursor: url('icon.cur'), auto;，不能只写url()，否则整个声明被忽略 - 文件格式优先用
.cur（支持热点坐标），.png虽然能用但不保证热点对齐，且 Safari 对 PNG 光标支持不稳定 - 尺寸别超 128×128px，Windows 系统对大于 32×32 的光标可能降级渲染；移动端基本不支持任何
url() - 路径是相对于最终 CSS 文件位置，不是 HTML 或源码目录——Webpack/Vite 构建后容易 404，建议用
public/目录放光标文件并写绝对路径/cursor.cur
Tailwind 中 cursor-* 类不生效的典型场景
Tailwind 的 cursor-pointer 是纯样式映射，它生效的前提是：浏览器得先承认这个元素“值得 hover”。
- 父容器有
pointer-events: none？子元素再加cursor-pointer也白搭 - 元素是
span或纯文本节点？移动端 Safari 默认不触发:hover，更别说hover:cursor-pointer - 用了
hover:变体但没配语义属性？比如div.hover:cursor-pointer应该加上role="button" tabindex="0"才能被键盘和读屏器识别 - 想在加载中临时切光标？别用
hover:cursor-wait，它只在悬停时触发——应该用 JS 动态加class="cursor-wait"到body或操作区域
移动端和无障碍场景下 cursor 的实际价值有限
触摸设备没有鼠标，cursor 样式完全不渲染；屏幕阅读器用户也看不到光标变化。强行统一桌面/移动体验反而增加冗余。
- 不要为响应式组件写两套
cursor规则，移动端直接省略——用touch-action或aria-pressed代替视觉反馈 -
cursor: none在全屏游戏里有用，但在普通网页里禁用光标会破坏可访问性，WCAG 明确不推荐 - 真正关键的是：光标变化必须和交互状态严格同步。比如按钮置灰时立刻切
not-allowed，而不是等 JS 异步判断完才改 class
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
