直接在图片标签上添加 filter grayscale 类可实现置灰效果，需同时使用 filter（启用滤镜）和 grayscale（应用100%灰度）；支持 grayscale-0 取消灰度，自定义中间值需扩展配置或内联样式，并可通过 hover:grayscale-0 实现悬停恢复彩色。
直接在图片标签上添加 Tailwind 的 filter grayscale 工具类即可实现置灰效果，但要注意默认情况下 filter 类需配合 filter（启用滤镜）和 grayscale（应用灰度）两个类一起使用。
基础用法：图片置灰
Tailwind 默认提供 filter 和 grayscale 两个独立工具类，必须同时添加才能生效：
<img src="photo.jpg" alt="示例图" class="filter grayscale">
其中：
- filter 启用 CSS filter 属性（相当于 filter: none，为后续滤镜打基础）
- grayscale 应用 filter: grayscale(100%)
控制灰度强度（非全灰）
Tailwind 默认只提供 grayscale（100%）和 grayscale-0（0%，即无灰度）。如需中间值（如 50%），有以下两种方式：
- 自定义 CSS：在
tailwind.config.js的theme.extend.filter中扩展，例如添加grayscale-50: 'grayscale(0.5)'，再生成对应类 - 内联 style（快速调试）：
class="filter" style="filter: grayscale(0.7);"
配合交互：悬停恢复彩色
利用 Tailwind 的状态变体，可轻松实现「默认置灰、鼠标移入恢复」效果：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" alt="示例图" class="filter grayscale hover:grayscale-0 transition-all duration-300">
说明：
- hover:grayscale-0 表示悬停时取消灰度
- transition-all duration-300 让颜色变化更平滑（可选）
注意事项与常见问题
filter 类必须存在：仅写 grayscale 不生效，因为 Tailwind 的 grayscale 是 filter 的子属性，依赖父级 filter 开启上下文。
图片需加载完成：若图片异步加载（如懒加载），确保类在图片渲染后已挂载。
性能提示：大量使用 filter 可能影响滚动性能，复杂页面建议对关键图片使用，或搭配 will-change: filter（谨慎使用）。
