必须升级Tailwind至v3.1+并手动配置backdropBlur扩展，否则backdrop-blur-md等类名不会生成CSS；还需确保元素背景透明、父容器无overflow-hidden、背后有可模糊内容层。
必须升级到 Tailwind v3.1+，且手动配置 backdropBlur 扩展，否则 backdrop-blur-md 这类类名根本不会生成 CSS。
为什么加了 backdrop-blur-lg 却完全没模糊？
不是写法错，是 Tailwind 根本没为你生成那条 CSS 规则。v3.0 及更早版本不支持 backdrop-blur；v3.1+ 默认虽“声明支持”，但实际仍需在 tailwind.config.js 中显式扩展值，否则构建时静默忽略。
- 检查你的 Tailwind 版本：
npm list tailwindcss，确认 ≥ 3.1 - 打开
tailwind.config.js，补上这段（注意单位必须是字符串）：
module.exports = {
theme: {
extend: {
backdropBlur: {
xs: '2px',
sm: '4px',
md: '8px',
lg: '12px',
xl: '16px',
}
}
}
}
- 改完后必须清缓存并重构建：Vite 用户重启 dev server；Next.js 用户运行
next dev；或直接执行npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch - 验证是否生效：搜索生成的 CSS 文件（如
dist/output.css）中是否存在backdrop-filter: blur(12px)
backdrop-blur 生效的三个硬性前提
就算 CSS 生成了，浏览器也支持，backdrop-blur 依然可能“看不见”——它只对「背后的内容」模糊，自身必须透出那部分区域。
- 元素自身要有透明背景：
bg-white/10、bg-black/20可用，bg-white或bg-gray-50（不带 opacity）直接失效 - 父容器不能设
overflow-hidden：裁掉背景区域后，模糊就无源可溯，边缘常出现难看的灰白块 - 背后必须真有内容层：模态框别嵌在
z-index: 0的卡片里；推荐挂到<body>直接子级，或确保其z-index足够低、下方有可被模糊的滚动内容
模糊值怎么选才不翻车？
Tailwind 预设档位太粗（backdrop-blur-sm = 4px），高分屏上基本看不出效果；手写 backdrop-blur-[6px] 又依赖 JIT 模式且易拼错。最稳的路径是收口到配置里。
立即学习“前端免费学习笔记（深入）”；
- 别迷信
-xl：超过 16px 后 iOS Safari 渲染明显变慢，滚动中卡顿感强；安卓 WebView 多数只支持 ≤12px - 移动端优先用
md（8px）或lg（12px）；桌面端可试探xl（16px），但务必真机测 - 想微调？在
tailwind.config.js里加'2xl': '20px'，然后用backdrop-blur-2xl—— 不用手动写任意值，也避免 JIT 漏编译 - 绝对不要混用：
backdrop-blur-md和自己写的style="backdrop-filter: blur(8px) brightness(1.2)"会冲突，后者覆盖前者
Firefox 和微信 X5 内核怎么办？
Firefox 103+ 才原生支持 backdrop-filter，旧版默认关闭；微信内置浏览器（X5 内核）至今完全不识别该属性——写了等于白写。
- 别用
@supports包裹 Tailwind 类名：Tailwind 默认不生成带条件规则的变体，配插件成本高 - 静态背景可用降级方案：背后叠一层相同图片 +
filter: blur(8px)+background-attachment: fixed，但仅限固定背景 - 动态内容（如滚动列表上的弹窗）无法优雅降级，建议业务层判断 UA，对不支持环境直接回退为半透明纯色背景（如
bg-black/30）
最容易被忽略的一点：模糊效果是否可见，和你写的类名关系不大，和背后的 DOM 层级、父容器的 overflow 与 background 设置强相关。调试时先关掉所有 z-index 和 overflow，再一层层加回来。
