Tailwind 中启用 backdrop-blur 需版本 ≥ 3.1 且未在配置中禁用，默认开启；需清缓存重构建，配合透明背景、非 overflow-hidden 父容器及背后有内容才生效。
backdrop-blur 在 Tailwind 中怎么开？
直接写 backdrop-blur 就行，但前提是你的 Tailwind 版本 ≥ 3.1，且没在 tailwind.config.js 里关掉它。默认是开启的，但很多人升级后没清缓存或重编译，看着类名不生效——其实不是语法错，是 CSS 没生成。
- 检查是否启用：打开生成的 CSS 文件（比如
dist/output.css），搜backdrop-blur，有就说明配置没问题 - 清缓存重构建：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch或重启 Vite/Next dev server - 旧项目如果用的是 v2.x，必须升级；v3.0 不支持，3.1 才引入
backdrop-blur 的参数值怎么选？
Tailwind 默认只提供有限几档模糊半径：backdrop-blur-sm、backdrop-blur（即 backdrop-blur-md）、backdrop-blur-lg、backdrop-blur-xl，对应 4px、8px、12px、16px。别指望它像原生 CSS 那样写 backdrop-blur(20px) —— Tailwind 不认这种写法，会静默忽略。
- 想自定义值？得改
theme.extend.backdropBlur，加进tailwind.config.js - 注意单位：只接受
px，不支持rem或em - 过度模糊（比如
backdrop-blur-3xl）在低端设备上可能卡顿，iOS Safari 对大于12px的渲染也偏慢
为什么加了 backdrop-blur 没效果？
最常见原因是元素没「透」——backdrop-blur 只对「背后的内容」起作用，所以该元素本身得是半透明或带空隙的。纯白不透明块盖上去，后面再模糊也看不见。
- 必须配合
bg-opacity或bg-black/20这类带透明度的背景色 - 父容器不能设
overflow: hidden，否则裁掉背景区域，模糊就失效 - 确保背后真有内容：比如模态框要放在 body 层级，别被某个
z-index: 0的父容器挡住视觉层级 - 某些安卓 WebView（尤其旧版）压根不支持
backdrop-filter，连带backdrop-blur会退化成纯色块
和原生 backdrop-filter 混用要注意什么？
Tailwind 的 backdrop-blur 本质就是生成 backdrop-filter: blur(...)，但它不处理其他 backdrop-filter 值（比如 backdrop-brightness）。想叠加多个效果，得手动写插件或用 @layer utilities 扩展。
立即学习“前端免费学习笔记（深入）”；
- 不要混用
backdrop-blur-md和自己写的backdrop-filter: blur(8px) brightness(1.2)，后者会覆盖前者 - 如需组合，推荐统一手写 utility 类，或用
backdrop-blur+backdrop-brightness（需自行添加插件，如@tailwindcss/forms不提供） - 性能敏感场景慎叠太多：每个
backdrop-filter都触发离屏渲染，iOS 上两个以上就容易掉帧
真正麻烦的从来不是写对类名，而是得同时盯住透明度、层级、父容器溢出、浏览器兼容性这四点——漏一个，blur 就像没开过。
