<p>Tailwind 的 bg-gradient-* 类在 IE11 等旧浏览器中完全不显示，因其原生不支持 linear-gradient() 函数，Autoprefixer 无法补前缀；必须用纯色类（如 bg-blue-500）作 fallback，并仅在现代浏览器中叠加渐变。</p>
旧浏览器（如 IE11、Android 4.4 WebView）根本不支持 background-image: linear-gradient()，Tailwind 的 bg-gradient-to-r 类在这些环境里会静默失效——不是颜色错，是整个渐变直接不渲染。必须降级为纯色 fallback 或用 PostCSS 插件补前缀，但后者对渐变无效。
为什么 bg-gradient-* 在 IE11 里完全不显示
IE11 不支持 CSS linear-gradient() 函数，连带所有基于它的语法（包括 Tailwind 编译出的 background-image 声明）都会被忽略。Autoprefixer 对它无能为力——这不是缺前缀的问题，是语法原生不识别。
- 检查 DevTools 的 Computed 面板：
background-image属性值为空或显示为none，就说明被丢弃了 -
bg-gradient-to-r from-blue-500 to-purple-600在 IE11 中等效于没写这个类 - 即使你手动加
-webkit-linear-gradient，IE11 也不认；它只支持老式filter: progid:DXImageTransform.Microsoft.gradient（已废弃且不可靠）
兼容方案只能靠 fallback + 条件覆盖
不能指望渐变“变通”生效，唯一可靠路径是：默认用纯色，仅在支持渐变的浏览器中覆盖为渐变。
- 用
bg-blue-500作为基础背景色（IE11 可见） - 在现代浏览器中叠加渐变：
bg-blue-500 bg-gradient-to-r from-blue-500 to-purple-600—— 渐变会覆盖纯色，但 IE11 只认第一个 - 更稳妥写法：
bg-blue-500 dark:bg-gray-800 bg-gradient-to-r from-blue-500 to-purple-600 dark:from-indigo-700 dark:to-cyan-800，确保深色模式也降级安全 - 避免用
from-transparent等组合：IE11 对透明色支持极差，容易导致整块背景消失
别踩 Autoprefixer 的坑：它对渐变没用
Autoprefixer 只补属性前缀（如 -webkit-flex），但 linear-gradient() 是函数，不是属性。给它加 -webkit- 前缀毫无意义，浏览器不会解析。
立即学习“前端免费学习笔记（深入）”；
- 删掉
browserslist里类似"IE 11"的配置——加了也没用，只会拖慢构建 - 不要在
postcss.config.js里给 autoprefixer 设overrideBrowserslist强制支持渐变 - 如果项目强制要求 IE11 支持渐变视觉，应改用 SVG 背景图或 Canvas 绘制，而不是依赖 CSS
真正麻烦的是，渐变 fallback 很难做到视觉一致：纯色缺乏层次感，而渐变在 Safari 旧版又可能发虚。与其花时间调参，不如明确分层——功能可用性保底用纯色，体验增强留给现代浏览器。
