backdrop-blur不生效需先确认Tailwind≥3.1、清缓存重构建，并确保元素背景透明、父容器无overflow-hidden、背后有真实内容；blur值建议≥8px，兼容性差时用@supports降级。
backdrop-blur 类名不生效？先查 Tailwind 版本和构建缓存
Tailwind 的 backdrop-blur 从 v3.1 才正式支持，v3.0 及更早版本完全不识别该类名。如果你用的是旧项目，npx tailwindcss --version 一查就知道；升级后必须清缓存并重构建——Vite/Next 等 dev server 不会自动注入新生成的 CSS 规则。
验证是否真生效：打开最终输出的 CSS 文件（如 dist/output.css），搜索 backdrop-filter: blur，有结果才说明配置没关、JIT 模式正常启用。没搜到？不是写法错，是构建没刷新。
- 旧版 Tailwind（v2.x 或 v3.0）：必须升级到 ≥ v3.1
- 已升级但无效：重启开发服务器 + 清除 node_modules/.cache/tailwindcss
- CDN 引入（
https://cdn.tailwindcss.com）：默认加载最新稳定版，但不支持自定义backdropBlur扩展
加了 backdrop-blur 却像没加？检查三个“透”字条件
backdrop-blur 不是给自身模糊，而是对「背后的内容」做高斯模糊。它生效的前提是：元素得「透」，背景得「透」，父容器也得「透」——三者缺一不可。
- 元素自身要有透明度：不能只写
backdrop-blur-md，必须搭配bg-white/10、bg-black/20这类带 alpha 值的背景色（bg-opacity已废弃） - 父容器不能设
overflow-hidden：否则裁掉背后区域，blur 就采样不到内容，容易出白边或灰块 - 背后必须有真实内容层：比如模态框应挂载在
body下，别被某个z-index: 0的 wrapper 挡住层级
常见假象：Chrome DevTools 里看到样式写了，但 Safari 或真机上空白——大概率是背后没内容，或父容器 overflow 裁剪了。
blur 值选多大才看得见？别迷信 -sm/-md
Tailwind 默认预设值很保守：backdrop-blur-sm = 4px，backdrop-blur-md = 8px。在 Retina 屏或高 DPR 设备上，4px 几乎无感；而 16px（backdrop-blur-xl）在 iOS Safari 上已有明显卡顿迹象。
- 实测建议起步值：至少
backdrop-blur-md（8px），深色背景下可试backdrop-blur-lg（12px） - 想精确控制？在
tailwind.config.js里扩展：theme.extend.backdropBlur = { '6': '6px', '10': '10px' }，然后用backdrop-blur-6 - 单位只能是
px，不支持rem或%；JIT 模式下可写backdrop-blur-[10px]，但生产环境慎用，影响 CSS 体积
微信/X5 内核和低端安卓 WebView 怎么办？
微信内置浏览器（X5 内核）、部分 Android 8–10 的系统 WebView 完全不支持 backdrop-filter，backdrop-blur 会静默退化为纯色块——这不是你代码问题，是引擎限制。
稳妥做法是用 @supports 提供降级：
.glass {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.18);
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
Tailwind 默认不生成带 @supports 的变体，所以要么手写 utility 类，要么用插件（如 tailwindcss-backdrop-filter）。别指望加个 dark: 或 hover: 就能绕过兼容性问题——底层不支持，修饰符再全也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
