应使用 grayscale-0 和 grayscale 显式切换灰度状态，因 grayscale 默认等价 grayscale-100（filter: grayscale(1)），仅移除该类无法恢复彩色；需手动补 transition-filter 或 transition-all 并注意 Safari 兼容性。
直接用 grayscale 和 grayscale-0 配合 JavaScript 切换，别只写 grayscale 然后靠 classList.toggle() 单类名来回切——那样切不回彩色。
为什么只写 grayscale 切换会失效
因为 grayscale 在 Tailwind 中默认等价于 grayscale-100（即 filter: grayscale(1)），它不是布尔开关。移除这个类，并不等于恢复原色；浏览器不会自动“回退”到 grayscale(0)，而是可能继承父级或重置为未定义状态，结果不可控。
- 错误写法：
img.classList.toggle('grayscale')→ 第二次点击时类被移除，但图片仍灰（尤其在 Safari 或旧版 Chrome） - 正确逻辑：必须显式控制两个互斥状态，比如
grayscale-0（彩色）和grayscale（全灰） - 初始状态建议明确写死，例如
grayscale 类的参数与单位陷阱
Tailwind 的 grayscale 工具类底层映射的是 CSS filter: grayscale()，而这个函数接受数值 0–1 或百分比 0%–100%。漏掉单位是常见翻车点。
-
grayscale-50→filter: grayscale(0.5)（半灰） -
grayscale(50)（没 %）是无效值，浏览器降级为grayscale(0)，看起来“没生效” - 不要混用
grayscale和grayscale-100：它们生成的 CSS 规则权重相同，class 加载顺序可能导致意外覆盖 - 响应式场景下可用
md:grayscale-0控制断点，但注意它只在中屏及以上生效，小屏仍按默认类走
hover 或点击切换时的过渡不生效？检查这三处
直接写 transition: filter 很容易在 Safari 上闪烁或跳变，不是代码写错了，而是渲染机制差异。
- Tailwind 默认不给
grayscale类加transition，必须手动补上，比如transition-all或启用transition-filter（需在tailwind.config.js的theme.transitionProperty中注册） - Safari 对
filter的硬件加速支持弱，若卡顿可试will-change: filter，但慎用——可能触发额外合成层，反而更卡 - 必须同时定义初始态：如果 hover 变灰，就得先写
img { filter: grayscale(0); transition: filter 0.3s; }，否则第一次 hover 会突变 - 别把图片塞进
background-image：filter 对背景图完全无效，只作用于
禁用状态下加灰度？disabled:grayscale 大概率不工作
Tailwind v3+ 默认禁用所有 disabled: 变体，即使你写了 disabled:grayscale-100，编译后也不会生成对应 CSS 规则。
- 根本原因：配置里没启用
@tailwindcss/forms插件，或没手动注册disabled变体 - 更稳妥做法：放弃
disabled:前缀，改用显式类名如is-disabled，配合filter: grayscale(100%) brightness(0.92) opacity(0.45)和pointer-events: none - 若必须保留原生
disabled属性（如表单防重复提交），就叠加写：，确保语义与样式同步 - iOS Safari 14 及更早版本对
:disabled + filter渲染不可靠，真机测试不能跳过
真正容易被忽略的是：不同浏览器对 grayscale() 的实现细节不一致。同一张图在 Chrome 和 Safari 里灰度浓度、暗部细节都可能不同——如果你在做品牌视觉验收，别指望它像素级准确，该上 Canvas 或 SVG 滤镜的时候就得上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
