必须同时使用 filter 类和具体滤镜类（如 blur-md）才能生效，因 filter 是开启 css filter 属性的开关，blur-md 等仅提供参数值；单独使用 blur-md 无效。
直接用 filter 类启用滤镜，再叠加 blur、grayscale 等具体效果类 —— 但必须注意：Tailwind 默认不生成 hover/focus 变体，也不支持自定义滤镜值，硬套会失效。
为什么加了 blur-md 却没模糊效果？
因为 blur-md 本身不生效，它依赖前置的 filter 类来触发 CSS 的 filter 属性。没有 filter，所有子滤镜类（如 blur-md、grayscale）只是空声明。
-
filter是开关，必须显式写上；blur-md是参数，只负责提供值 - 错误写法：
blur-md单独用 → 浏览器忽略 - 正确写法：
filter blur-md一起用 → 生成filter: blur(0.75rem) - 如果用了响应式前缀（如
md:blur-lg），也必须配md:filter，否则断点内仍无效果
如何同时应用模糊 + 灰度 + 对比度？
多个滤镜类可以共存，Tailwind 会把它们合并进同一个 filter 声明里，顺序不影响渲染结果（CSS filter 函数执行是链式叠加的）。
- 写法示例：
filter blur-sm grayscale contrast-125 - 最终生成：
filter: blur(0.125rem) grayscale(1) contrast(1.25) - 注意对比度单位是倍数（
contrast-125=1.25），不是百分比 - 慎用高值：比如
contrast-200容易导致细节丢失，blur-xl在移动端可能影响可读性
想在 hover 时才启用滤镜？默认不支持
Tailwind v3.4+ 内置的 filter 工具类默认只生成 responsive 变体，hover:filter 或 hover:blur-sm 不会输出任何 CSS。
- 要启用 hover 变体，必须手动修改
tailwind.config.js： module.exports = { variants: { extend: { filter: ['hover'], } } }- 改完需重启构建（
npm run dev或tailwindcss -i ...） - 更推荐做法：用插件
tailwindcss-filters，它默认开启hover和focus变体，且支持自定义滤镜值
自定义模糊值或新增滤镜类型？内置工具类做不到
内置 blur-sm 到 blur-3xl 是固定步长（0.125rem ~ 6rem），无法写 blur-7px 或 hue-rotate-90。
- 如果需要非标准值，有两个选择：
- 用
tailwindcss-filters插件，在theme.filter中添加键值对，例如：'blur-7px': 'blur(7px)' - 或直接写
style="filter: blur(7px) hue-rotate(90deg)"，但失去响应式和复用性 - 插件还支持
backdrop-filter（如毛玻璃效果），而原生 Tailwind 内置完全不提供该能力
真正容易被忽略的是：所有滤镜类都依赖 filter 开关，且变体（hover/responsive）必须显式声明，不是“写了就自动有”。别指望靠猜类名就能跑通，配置和组合逻辑得对齐才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
