disabled:cursor-not-allowed必须配合disabled属性使用，仅加类名无效；它依赖原生:disabled伪类，自动监听禁用状态并精准生效，比静态cursor-not-allowed更可靠且语义正确。
用 disabled:cursor-not-allowed 最直接
Tailwind 提供了状态前缀 disabled:，它会自动监听元素的 disabled 属性变化，并只在真实禁用时生效。对输入框加这个类，光标就会变成禁止图标，无需 JS 监听或手动切换类名。
正确写法示例：
<input type="text" value="已禁用" disabled class="border p-2 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500">
-
disabled:cursor-not-allowed必须配合disabled属性使用，仅加类名无效 - 它比
cursor-not-allowed更可靠——后者是静态设置，哪怕输入框没禁用也会显示禁止光标 - 该前缀底层依赖原生
:disabled伪类，所以只对<input>、<button>等合法可禁用元素起作用
为什么 cursor-not-allowed 单独加经常不管用
单独写 cursor-not-allowed 是“强制改光标”，但用户看到光标变了，输入框却还能聚焦、能复制内容、甚至能按 Tab 进入——这反而造成语义混乱和无障碍问题。
- 浏览器不会因为光标变禁止就自动屏蔽键盘操作或读屏器播报
- 若输入框没设
disabled属性，它仍是可访问、可交互的 DOM 元素 - 某些组件库（如 Element Plus）封装后，
disabled属性可能没透传到原生<input>上，此时disabled:前缀也不触发
disabled: 前缀不生效的常见原因
样式写了但鼠标悬停还是默认箭头？先排查这几个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 中真实存在
disabled属性：<input disabled>，而不是靠 JS 改input.disabled = true后忘了重渲染（React/Vue 中尤其常见） - 检查是否父级有
<fieldset disabled>—— 它会让子元素不可交互，但子<input>自身不匹配:disabled，disabled:前缀也就不会激活 - Tailwind 版本需 ≥ 3.0；旧版不支持状态前缀，得退回到
cursor-not-allowed+ 手动控制类名 - 如果用了 Shadow DOM 或 CSS-in-JS，确认样式作用域包含该
<input>，disabled:不会穿透边界
别漏掉配套视觉反馈
只改光标不够。用户需要同时感知“不可编辑 + 不可点击 + 不可聚焦”。disabled: 可以链式组合：
-
disabled:opacity-70降低整体透明度（但注意：带图标的输入框慎用，图标也会变淡） -
disabled:bg-gray-100 disabled:text-gray-500 disabled:border-gray-300同步调整背景、文字、边框色 - 避免只写
disabled:cursor-not-allowed而不配其他样式——容易让用户误以为只是“暂时卡住”而非真正禁用
最易被忽略的是：不同 type 表现不一致。比如 input[type="date"] 在 Safari 中禁用后仍显示下拉箭头，input[type="range"] 在 Firefox 中滑块可能消失——这时候单靠 disabled: 前缀无法统一视觉，得额外用 appearance-none 或伪元素覆盖。
