disabled:grayscale 不生效是因为 tailwind v3+ 默认禁用 disabled 变体，需手动启用或改用 is-disabled 类名统一控制视觉、交互与语义。
直接写 disabled:grayscale 不生效，Tailwind 默认不生成该变体，且原生 :disabled 在移动端（尤其 iOS Safari）对 filter 渲染不可靠。
为什么 disabled:grayscale-100 什么反应都没有
根本原因是 Tailwind v3+ 默认禁用所有 disabled: 变体，编译时直接忽略这类类名——连 CSS 规则都不会生成。即使你写了 <button disabled class="disabled:grayscale-100"></button>，DevTools 里也搜不到 button:disabled 相关样式。这不是写错，是配置缺位。
- 检查
tailwind.config.js是否在plugins中启用了@tailwindcss/forms或手动注册了disabled变体 - 确认按钮是原生
<button></button>、<input>等可禁用元素；自定义组件（如<mybutton></mybutton>）不匹配:disabled - 别指望
filter在禁用态下“自动生效”：iOS Safari 14 及更早版本常跳过渲染，高对比度模式下会被系统强制禁用
真正能落地的禁用灰度写法（兼容 + 可访问）
放弃只靠 disabled: 前缀，改用显式类名控制，同时覆盖视觉、交互、语义三层：
- HTML 中移除
disabled属性，改用class="btn is-disabled" - CSS（或 Tailwind 的
@layer utilities）中定义：`.is-disabled { filter: grayscale(100%) brightness(0.92); opacity: 0.45; pointer-events: none; cursor: not-allowed; color: #666 !important; background-color: #f5f5f5 !important; }` - JS 控制时，用
el.classList.toggle('is-disabled', isLoading)，而非el.disabled = true - 若必须保留
disabled属性（如表单提交防重复），则叠加使用：<button disabled class="is-disabled"></button>，确保样式和语义同步
Tailwind v3+ 启用 disabled: 变体的两种方式
仅当你确定用的是原生按钮、且项目已统一启用表单控件变体时才考虑此路径：
- 推荐方式：安装并启用插件
npm install @tailwindcss/forms，然后在tailwind.config.js的plugins数组中添加require('@tailwindcss/forms') - 轻量方式：手动注册变体
在plugins中添加：plugin(({ addVariant }) => { addVariant('disabled', '&:disabled') }) - 启用后仍需注意：
disabled:opacity-50只调透明度，不改cursor和filter；要灰度必须额外写disabled:grayscale（前提是已生成该变体） - 改完配置必须重启开发服务器（
pnpm dev或npm run dev），否则热更新不生效
最易被忽略的点：灰度只是表象，pointer-events: none 和 aria-disabled="true" 才决定它是否真不可交互；纯视觉降权在键盘导航或屏幕阅读器下完全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
