Tailwind 中 disabled 伪类变体默认不启用，需在配置中显式开启；v2.x 在 variants 中添加 'disabled'，v3+ 推荐使用 @tailwindcss/forms 或手动 addVariant；仅原生可禁用元素支持 :disabled，自定义组件应使用 data-disabled + 自定义变体，并配合 pointer-events-none 和 cursor-not-allowed。
disabled 伪类在 Tailwind 中根本不存在
直接写 disabled:opacity-50 不会生效——Tailwind 默认不生成 :disabled 变体，除非你显式启用它。这和原生 CSS 的 :disabled 伪类无关，而是 Tailwind 的变体（variant）机制没开这个开关。
- 默认配置下，
disabled:前缀完全被忽略，编译后连对应 CSS 规则都不会生成 - 只有启用了
disabled变体，disabled:opacity-50才会被转成类似button:disabled { opacity: 0.5; }的规则 - 常见错误：在按钮上加
disabled属性，但样式没变，就以为是 class 写错了，其实是变体没开
如何正确启用 disabled 变体
需要修改 tailwind.config.js，在 variants（v2.x）或 plugins（v3+）中声明支持。
- v2.x（旧版）：在
module.exports的variants对象里，把opacity对应的数组加上'disabled' - v3+（推荐）：改用
plugins配置，添加require('@tailwindcss/forms')—— 它会自动为表单控件启用disabled、focus、hover等常用变体 - 如果不用
@tailwindcss/forms，v3+ 需手动在plugins中调用plugin(({ addVariant }) => { addVariant('disabled', '&:disabled'); })
button[disabled] 和 :disabled 的细微差别
即使启用了 disabled 变体，最终生成的 CSS 是 &:disabled，它匹配所有带 disabled 属性的元素，但对语义和可访问性有隐含要求。
-
<button disabled class="disabled:opacity-50">提交</button>✅ 正常触发 -
<div disabled class="disabled:opacity-50">假装按钮</div>❌disabled属性对div无效，:disabled伪类也不匹配 - 屏幕阅读器只识别原生可禁用元素（
button、input、select、textarea）的disabled属性，自定义组件需用aria-disabled="true"并手动控制样式
更稳妥的禁用状态处理方式
依赖 :disabled 变体虽简洁，但容易漏掉非原生控件或 SSR 渲染时机问题。实际项目中建议组合使用。
立即学习“前端免费学习笔记（深入）”；
- 对原生
button/input：启用disabled变体 + 直接写disabled属性，最省事 - 对自定义按钮组件（如
<mybutton disabled></mybutton>）：用data-disabled属性 + 自定义变体（addVariant('disabled', '[data-disabled]')），避免污染语义 - 禁用时除了视觉降权，务必同步设置
pointer-events-none和cursor-not-allowed，否则仍可点击（尤其在快速连点或 touch 设备上）
disabled: 这种写法看着像 CSS，实则是构建时的开关——没开，就等于没写。 
