filter类是启用CSS filter属性的开关而非实现效果，必须显式声明filter才能使blur-md等类生效；响应式或hover变体需在配置中手动开启，否则无效；多滤镜类可共存合并为单条filter声明，但须同属一元素。

filter 类不是“引入新功能”，而是为已有 CSS filter 属性提供可控、可组合的开关机制——它本身不实现任何视觉效果，只负责启用底层能力。

为什么必须显式写 filter 才能用 blur-md？

因为 blur-md、grayscale、contrast-125 这些类只是提供函数参数值，比如 blur(0.75rem) 或 grayscale(1)，但它们不触发 CSS 的 filter 属性声明。浏览器看到 blur-md 却没 filter，就当它不存在。

• filter 是“总闸”，打开后才允许后续滤镜生效
• blur-md 是“旋钮”，只调数值，不开闸就转不动
• 写成 blur-md grayscale 却没 filter → 最终生成的 CSS 里根本没 filter: 这行

响应式或 hover 下滤镜失效？变体没开

Tailwind v3 默认只生成 md:filter、lg:filter 这类响应式变体，但 hover:filter 或 focus:filter 不在默认列表里。写了 hover:blur-sm 却没配 hover:filter，等于只拧了旋钮，没开闸。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 要支持 hover，必须在 tailwind.config.js 中显式开启：

  module.exports = {
    variants: {
      extend: { filter: ['hover'] }
    }
  }

• 改完需重启构建（npm run dev），否则缓存中没新 CSS 规则
• 更省事的做法是直接装 tailwindcss-filters 插件，它默认带 hover/focus 变体

想叠加模糊 + 灰度 + 对比度？顺序无关，但得共存

Tailwind 会把多个滤镜类合并进同一个 filter: 声明，例如：filter blur-sm grayscale contrast-125 → filter: blur(0.125rem) grayscale(1) contrast(1.25)。

• CSS 滤镜函数是链式执行，顺序不影响最终视觉结果
• 但所有类必须和 filter 在同一元素上，不能拆到父/子元素
• contrast-200 这类高值容易让细节发白，blur-xl 在移动端可能拖慢渲染，建议先试 blur-md 和 contrast-110

真正容易被忽略的是：没有 filter，所有滤镜类都是无效声明；而变体（hover、md:）不会自动继承，必须手动声明。