disabled:opacity-50 不会生效，除非显式启用 disabled 变体且作用于原生可禁用元素；v3+ 需通过插件（如 @tailwindcss/forms 或自定义 addvariant）启用，否则编译不生成对应 css 规则。
直接说结论： disabled:opacity-50 不会生效，除非你显式启用 disabled 变体；且它只对原生可禁用元素（button、input 等）起作用，对自定义组件或 SSR 渲染延迟的场景容易失效。
为什么 disabled:opacity-50 没反应？
Tailwind 默认不生成 :disabled 对应的 CSS 规则——这不是 bug，是设计：变体（variant）需主动开启。v2.x 在 tailwind.config.js 的 variants 里加 'disabled'；v3+ 已移除 variants，必须通过插件启用。
常见现象包括：
- 按钮加了
disabled属性，但样式完全没变 - DevTools 里搜不到
button:disabled相关规则 - 手写
button:disabled { opacity: 0.5 }能生效，但 Tailwind 类名无效
根本原因：Tailwind 编译时跳过了所有 disabled: 前缀，压根没生成对应 CSS。
如何正确启用 disabled 变体（v3+ 推荐方案）
v3+ 不再支持 variants 配置，必须用插件。最稳妥的是引入 @tailwindcss/forms：
npm install @tailwindcss/forms
然后在 tailwind.config.js 的 plugins 数组中添加：
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
}
它会自动为 button、input、select 等启用 disabled、hover、focus 等常用变体。
如果不想引入整个 forms 插件，可手动注册：
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(({ addVariant }) => {
addVariant('disabled', '&:disabled')
})
]
}
注意：&:disabled 生成的是标准伪类选择器，匹配 button[disabled]，不是属性选择器 button[disabled="disabled"]。
加载中 + 禁用状态的组合写法与陷阱
加载中按钮通常要同时满足：视觉禁用、阻止点击、显示加载图标。仅靠 disabled:opacity-50 远不够：
-
disabled:opacity-50只控制透明度，不处理光标、指针事件、颜色对比度 - 移动端 Safari 对
:disabled的opacity渲染不稳定，可能看起来“没禁用” - 若按钮是自定义组件（如
<button loading></button>），disabled属性不合法，:disabled完全不匹配
推荐组合写法：
<button disabled class="disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none">
{isLoading ? '加载中...' : '提交'}
</button>
但前提是：disabled 变体已启用，且该元素是原生 button 或 input。
对自定义组件，改用 data-disabled + 自定义变体：
plugin(({ addVariant }) => {
addVariant('disabled', '[data-disabled]')
})
然后写：data-disabled={isLoading} 和 disabled:opacity-50 disabled:cursor-not-allowed。
更可靠的做法：别只依赖 opacity
单独用 opacity-50 易导致 WCAG 对比度不达标（尤其小字号按钮），且 iOS 和部分 WebView 中渲染异常。真正可用的禁用状态至少要同步控制：
-
opacity（可选，建议 0.45–0.6，深色模式下调高至 0.55） -
cursor: not-allowed（disabled:cursor-not-allowed） -
pointer-events: none（disabled:pointer-events-none） -
color和background-color（用disabled:text-gray-400 disabled:bg-gray-100等明确色值，比 opacity 更稳）
最后提醒：禁用状态不只是视觉反馈。务必确保 disabled 属性真实存在（服务端渲染时也要同步），否则屏幕阅读器无法识别，无障碍直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
