tailwind 的 grayscale 类默认等价于 filter: grayscale(1)，即图片完全黑白（100%灰度）；grayscale-0 对应 grayscale(0)，表示无滤镜、保持原色。
grayscale() 在 Tailwind 中的默认行为是什么
Tailwind 的 grayscale 工具类默认启用的是 grayscale(1)，也就是 100% 灰度 —— 图片完全黑白。它不是开关式布尔值，而是接受数值（0–1）或百分比（0%–100%）的函数，底层映射到 CSS 的 filter: grayscale()。这意味着 grayscale 类本身不带参数时等价于 grayscale-0？不对 —— 实际上 Tailwind 默认的 grayscale 就是 grayscale-100，而 grayscale-0 才是“无滤镜”。这点容易搞反。
-
grayscale→filter: grayscale(1)（全黑白） -
grayscale-0→filter: grayscale(0)（原色） -
grayscale-50→filter: grayscale(0.5)（半灰度）
如何实现点击切换黑白/彩色效果
纯 CSS 无法监听点击事件，所以必须结合 JavaScript 控制 class 切换。常见错误是只写 grayscale 和漏掉 grayscale-0，导致“切回去”时没效果 —— 因为默认状态可能已含 grayscale，而移除它并不等于加回 grayscale-0（后者才是显式重置）。
- 初始图片建议明确设为
grayscale-0或不设，避免依赖隐式默认 - 切换逻辑应基于 class 存在与否，而非 toggle 同一个类名
- 推荐用
classList.toggle('grayscale-0', condition)+classList.toggle('grayscale', !condition)，或更简洁地只操作一个类：用grayscale-0表示彩色，grayscale表示黑白
示例 JS：
const img = document.getElementById('my-img');
img.addEventListener('click', () => {
img.classList.toggle('grayscale-0');
img.classList.toggle('grayscale');
});
hover 与 transition 配合 grayscale 时的注意事项
直接对 filter 做 CSS 过渡（transition: filter 0.3s）在部分浏览器（尤其是 Safari）中表现不稳定，可能出现闪烁或跳变。Tailwind 默认不为 grayscale 类添加 transition，需手动补上。
- 务必同时设置
transition-all或transition-filter（后者需在tailwind.config.js的transitionProperty中启用） - Safari 对
filter的硬件加速支持较弱，若动画卡顿，可尝试加will-change: filter，但慎用，可能引发渲染层问题 - 不要混用
grayscale和grayscale-100—— 它们生成的 CSS 规则权重相同，class 切换时可能因顺序导致意外覆盖
响应式场景下 grayscale 的断点控制
Tailwind 支持响应式前缀，比如 md:grayscale-0 表示“中屏及以上取消灰度”，但要注意：这类规则只有在匹配断点时才生效，不匹配时不会自动回退到上一状态。如果希望“移动端黑白、桌面端彩色”，不能只写 grayscale md:grayscale-0，因为未命中 md 时，grayscale 会保留，而 md:grayscale-0 只在中屏起作用 —— 这个组合是对的；但如果初始没写基础类，响应式类就不会生效。
- 响应式 grayscale 必须有基础层（如
grayscale），再叠加sm:grayscale-0等覆盖 - 避免嵌套多层响应式 grayscale，比如
sm:grayscale md:grayscale-0 lg:grayscale—— 可读性差，且易因断点重叠出错 - 如果需要“仅在深色模式下启用 grayscale”，要用
dark:grayscale，但得确保启用了 dark mode 支持（darkMode: 'class'或'media'）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
