disabled:前缀失效的根本原因是Tailwind未生成对应CSS规则，因v3+默认不启用该变体，需安装@tailwindcss/forms插件或手动注册，并重启开发服务器。
直接用 disabled: 前缀是最优雅的路径，但前提是它真能生效——而它失效的原因，90% 都不是你写错了类名，而是 HTML、配置或平台限制没对齐。
disabled: 类名为什么写了却没反应
根本原因就一个：Tailwind 没生成对应 CSS 规则。v3+ 默认不启用 disabled: 变体（除非你装了 @tailwindcss/forms 或手动注册），所以 disabled:bg-gray-300 这种写法在 DevTools 里根本搜不到任何 button:disabled 样式。
- 检查
tailwind.config.js的plugins数组是否包含require('@tailwindcss/forms') - 没装插件的话，手动加变体：
plugin(({ addVariant }) => { addVariant('disabled', '&:disabled') }) - 改完必须重启开发服务器（
pnpm dev或npm run dev），热更新不触发新变体编译 - 确保元素是原生可禁用标签：
<button>、<input>、<select>——<div disabled>无效，浏览器根本不匹配:disabled
disabled:cursor-not-allowed 和 cursor-not-allowed 的区别
disabled:cursor-not-allowed 是语义正确的动态响应；cursor-not-allowed 是静态覆盖，容易造成“光标禁止但还能点、能聚焦、能复制”的错觉，损害可访问性。
-
disabled:cursor-not-allowed依赖原生:disabled伪类，只在真实禁用时生效，读屏器也会播报“disabled”状态 -
cursor-not-allowed单独加，哪怕input没设disabled属性，光标也变禁止，但 DOM 仍是可交互的 - React/Vue 中常见翻车：写了
className="disabled:cursor-not-allowed"，却忘了同步传disabled={isDisabled}—— 类名存在，属性没渲染，前缀不激活 - 父级有
<fieldset disabled>？子<input>被禁用但自身无disabled属性，disabled:前缀照样不触发
iOS Safari 上禁用按钮样式失效怎么办
iOS Safari（尤其 12–14）对 :disabled 渲染不可靠：可能忽略 opacity、跳过 background-color 更新、甚至不显示 cursor: not-allowed，更糟的是 touchstart 仍可能触发。
立即学习“前端免费学习笔记（深入）”；
- 别依赖单一属性，叠加四层控制：
opacity: 0.45+color: #999+background-color: #f5f5f5+pointer-events: none - 避免
filter: grayscale()—— iOS 14 及更早版本常不渲染，高对比度模式下被系统强制禁用 - 禁用态移除所有过渡：
transition: none，否则状态切换时易闪烁 - 若需保持键盘可访问（如 Tab 导航），慎用
pointer-events: none（它会同时禁用 focus），改用touch-action: none; user-select: none;
要不要放弃 disabled:，改用 is-disabled 类名
当项目里大量使用自定义组件（如 <MyButton>）、或需要跨平台强一致时，显式类名反而是更可控的选择。
- HTML 写
<button class="btn is-disabled">，不再依赖disabled属性 - CSS 中统一定义：
.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; color: #666 !important; } - JS 控制更直白：
el.classList.toggle('is-disabled', isLoading) - 若必须保留
disabled属性（比如防重复提交），就双写：<button disabled class="is-disabled">，确保语义和视觉同步 - 注意：此时要手动加
aria-disabled="true"，否则读屏器无法识别禁用状态
最易被忽略的点是：禁用状态从来不只是“换个颜色”，它是语义（disabled 属性）、视觉（背景/文字/光标）、交互（pointer-events / touch-action）、可访问性（aria-disabled）四者的严格对齐。少一环，用户就会困惑——尤其是那个明明光标禁止了却还能点开的按钮。
