tailwind v3.1+ 中 backdropblur 需在 tailwind.config.js 的 theme.extend 中显式配置，值为字符串（如 'sm': '4px'），且元素背景需带 alpha、父容器不能 overflow:hidden，safari 还需 -webkit-backdrop-filter 前缀。
tailwind.config.js 必须显式配置 backdropBlur 扩展
不配置就写不死，只会静默失效——backdrop-blur-sm 这类类名在 Tailwind v3.1+ 中默认不生成任何 CSS 规则。哪怕你写了 10 遍，最终 dist/output.css 里也搜不到 backdrop-filter: blur(4px)。
必须在 tailwind.config.js 的 theme.extend 中补全映射：
module.exports = {
theme: {
extend: {
backdropBlur: {
xs: '2px',
sm: '4px',
md: '8px',
lg: '12px',
xl: '16px',
}
}
}
}
-
backdropBlur是 theme key，不是插件名；v3.4+ 已内置，plugins数组里无需再加require('tailwindcss/plugins/backdropBlur') - 值必须是字符串（如
'sm': '4px'），不能是数字或空格 - 改完后务必清缓存重构建：Vite 用户重启 dev server，Next.js 用户运行
next dev，或手动执行npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
元素自身背景必须带 alpha，且父容器不能 overflow:hidden
backdrop-filter 模糊的是「背后」的内容，不是自己。背后空、前面不透、父容器裁剪，三者任一成立，效果就完全不可见。
- 用
bg-white/10或bg-black/20（v3.3+ 新语法），别用bg-white bg-opacity-10（老写法易漏配） - 父容器若设了
overflow-hidden，会裁掉模糊半径向外扩散的采样区域——边缘发灰、整块变白都是这个原因 - 背后必须有真实内容：模态框建议挂载到
document.body直接子级；侧边栏若嵌在z-index: 0的 wrapper 里，可能被挡住
Safari 和旧版 Chrome 需要 -webkit-backdrop-filter 前缀
Tailwind 默认只输出标准 backdrop-filter，但 Safari ≤16.6、部分 macOS Chrome 仍依赖 -webkit-backdrop-filter。不加前缀，效果完全不可见，且控制台不报错。
最稳妥做法是定义自定义工具类，同时覆盖标准属性与 WebKit 前缀：
.glass {
@apply bg-white/10 backdrop-blur-sm backdrop-saturate-150;
-webkit-backdrop-filter: blur(4px) saturate(1.5);
}
-
-webkit-backdrop-filter的值必须和 Tailwind 的backdrop-blur-sm对齐（即 4px），否则 Safari 会显示未模糊的原始背景 - 别混用
backdrop-blur-sm和手写的style="backdrop-filter: blur(4px) brightness(1.2)"，后者会覆盖前者 - 如果用了
backdrop-saturate-150，WebKit 前缀里也得带上saturate(1.5)，拆成两行会被 Safari 忽略
响应式场景下避免 transform / fixed 触发新层叠上下文
position: fixed + overflow: hidden 是“毛玻璃杀手”，尤其在移动端侧边栏、弹出卡片中。它会让 backdrop-filter 只模糊当前 stacking context 内的内容，而非页面全局背景。
- 优先用
position: sticky替代position: fixed；若必须用 fixed，确保其父级（如）有明确高度且未设overflow: hidden - 避免祖先元素设置
transform、will-change: transform或filter，它们会创建新层叠上下文，切断 backdrop 采样路径 - 移动端慎用
blur(12px)以上：iPhone 12 及中端安卓机滚动中易掉帧，实测blur(6px)～blur(8px)更平衡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
