blur-sm类必须与filter类共用才生效，因filter是开启css filter属性的开关，blur-sm仅提供参数值；单独使用无效。
直接用 blur-sm 类不会生效——它必须和 filter 一起用，否则浏览器完全忽略。
blur-* 类必须搭配 filter 才能工作
Tailwind 的 blur-sm 到 blur-3xl 只是定义模糊半径值，不带 filter 就像开关没打开。CSS 中 filter: blur(4px) 是完整声明，blur-sm 只提供 blur(0.125rem) 这部分。
- 错误写法：
blur-sm单独加在元素上 → 构建后无任何filterCSS 输出 - 正确写法：
filter blur-sm同时存在 → 生成filter: blur(0.125rem) - 响应式场景下（如
md:blur-lg），也得配md:filter，否则断点内失效 - hover 等交互变体默认不启用，需在
tailwind.config.js中显式开启：variants: { extend: { filter: ['hover'] } }
backdrop-blur 是另一套逻辑，别和 filter blur 混用
backdrop-blur-sm 不是 filter 的子集，它作用于元素「背后」的内容，适用于毛玻璃效果。但它有三个硬性前提，缺一不可：
- Tailwind 版本 ≥ 3.1，且在
tailwind.config.js的theme.extend.backdropBlur中声明映射（如{ sm: '4px' }）；否则构建输出里根本找不到backdrop-filter规则 - 元素自身必须有透明背景：
bg-white/10可行，bg-white或bg-gray-50直接失效 - 父容器不能有
overflow: hidden，否则裁剪 backdrop 的采样区域，模糊变成“糊了个空” - Safari ≤16.6 和部分 Chrome 需要
-webkit-backdrop-filter前缀，仅靠 Tailwind 默认输出会黑屏
性能与兼容性关键点
blur 值不是越大越好看，而是越容易翻车：
- 单位必须是
px或rem：blur(8)、blur(20%)全部被静默忽略 - 移动端建议控制在
blur(4px)～blur(8px)：iOS Safari 在blur(12px)以上常降级为低精度模糊，安卓旧 WebView 可能跳帧 - 对内容容器直接加
filter: blur()会把文字、按钮全糊掉——真需要局部模糊，应该用伪元素分层 +position: fixed+z-index: -1 - 滚动时毛玻璃突然变实色？大概率是合成层没提上去，加
transform: translateZ(0)强制 GPU 合成
真正容易被忽略的是：所有模糊效果都依赖像素采样，背后若被遮罩盖住、或祖先链里有 overflow: hidden 或 clip-path，它就安静地不工作，DevTools 里看不出任何报错，只能靠渲染树逐层排查图层是否被截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
