使用filter: grayscale(100%)可直接实现图片黑白效果，现代浏览器普遍支持；需配合transition实现平滑过渡，注意IE不支持、移动端性能及Tailwind默认仅提供0%和100%两档。
grayscale 类直接让图片变黑白
默认的 grayscale 类会把图片完全转成灰度（100%），等价于 CSS 的 filter: grayscale(1)。它不依赖 hover，加在 <img alt="如何利用Tailwind CSS实现图片黑白滤镜_应用grayscale与hover:grayscale-0" > 标签上立刻生效：
<img src="photo.jpg" class="grayscale" alt="如何利用Tailwind CSS实现图片黑白滤镜_应用grayscale与hover:grayscale-0" >
注意：这个效果是“全开”状态，没有中间档位；Tailwind 默认只提供 grayscale（100%）和 grayscale-0（0%，即无滤镜）两个开关，不内置 25%/50%/75% 等渐进值。
hover:grayscale-0 是悬停时「取消」黑白效果
很多人误以为 hover:grayscale-0 是“悬停时加黑白”，其实正相反——它表示「鼠标移入时，把原本的 grayscale 滤镜关掉」。所以必须和基础 grayscale 配合使用才有效：
<img src="photo.jpg" class="grayscale hover:grayscale-0" alt="如何利用Tailwind CSS实现图片黑白滤镜_应用grayscale与hover:grayscale-0" >
常见错误是只写 hover:grayscale-0，结果悬停没变化，因为初始状态根本没应用滤镜。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
grayscale→ 图片黑白 - 悬停时：
hover:grayscale-0覆盖掉 grayscale → 图片恢复彩色 - 离开后：自动回退到初始的
grayscale状态
自定义 grayscale 百分比需手动配置
Tailwind 默认不支持 grayscale-50 这类中间值。如果需要 30%、60% 灰度，得在 tailwind.config.js 里扩展 theme.filter：
module.exports = {
theme: {
extend: {
filter: {
'grayscale-30': 'grayscale(0.3)',
'grayscale-60': 'grayscale(0.6)',
}
}
}
}
然后才能用 grayscale-30 或 hover:grayscale-60。不配就无效，不会报错，但样式不出现。
- 务必运行
npm run build（或对应构建命令）让配置生效 - 注意：Tailwind v3.0+ 才原生支持
filter扩展；v2 需配合插件 - 百分比值写小数（如
0.3），别写30%，否则 CSS 解析失败
性能与兼容性要注意这三点
filter 在低端 Android 或旧版 Safari 上可能触发重绘卡顿，尤其多图滚动时：
- 避免对
<picture></picture>或多个<img alt="如何利用Tailwind CSS实现图片黑白滤镜_应用grayscale与hover:grayscale-0" >同时加hover:grayscale-0，容易引发 layout thrashing - IE 完全不支持
filter，grayscale类会被忽略（可加filter: gray降级，但仅 IE 支持且效果不同） - 如果图片本身带 alpha 通道（如 PNG 透明背景），
grayscale不影响透明度，但某些显卡驱动下可能出现轻微色偏
真正要控制精细灰度或做动画过渡，用 transition-all duration-300 加在元素上，否则 hover 切换是瞬时跳变。
