Tailwind CSS 在 IE11 样式“消失”是因为 v3.0+ 默认不生成 -ms- 等前缀，需通过 autoprefixer 显式配置 browserslist（如 'IE 11'）并确保其在 tailwindcss 之后执行，且 gap/grid/aspect-ratio 等特性需手动降级。
Tailwind CSS 在 IE11 里样式“消失”，不是漏加前缀，而是它压根没生成任何兼容代码——v3.0+ 默认不输出 -ms-、-webkit- 这类前缀，必须靠 autoprefixer 插件补，且补的前提是你明确告诉它“要支持 IE11”。
为什么 autoprefixer 没给 IE11 加前缀
Autoprefixer 不会自己猜你要支持谁，全靠 browserslist 配置驱动。常见错误是只装了插件，却没在项目根目录加 .browserslistrc，或写了模糊表达如 last 2 versions——IE11 已被标记为 “dead”，默认直接跳过。
- 必须显式写
IE 11（不能写ie >= 11，autoprefixer不认） - Android 4.4 WebView 要写
Android >= 4.4，iOS 9+ 写iOS >= 9 - 如果用 Vite / Next.js / CRA，它们可能自带 PostCSS 配置，会静默覆盖你的
postcss.config.js，得检查是否生效
postcss.config.js 插件顺序错就等于没配
Tailwind 必须在 autoprefixer 之前运行，否则 autoprefixer 扫描不到原始 CSS 属性，自然无从加前缀。
- ✅ 正确顺序：
tailwindcss→autoprefixer→ 其他（如postcss-preset-env） - ❌ 错误顺序：
autoprefixer在tailwindcss前面，结果是空跑 - 推荐用
overrideBrowserslist直接写死目标，避免被框架默认配置劫持：module.exports = { plugins: { tailwindcss: {}, autoprefixer: { overrideBrowserslist: ['IE 11', 'Android >= 4.4', 'iOS >= 9'] } } }
gap、grid、aspect-ratio 加前缀也没用
Autoprefixer 只补语法前缀（比如把 flex 变成 -ms-flexbox），但像 gap 在 Flex 容器中 IE11 根本不支持，-ms-gap 不存在；display: grid 和 IE10/11 的 -ms-grid 是两套互不兼容的布局系统。
立即学习“前端免费学习笔记（深入）”；
- 用
space-x/space-y替代gap（它们编译为margin，IE11 完全支持） - 对
grid做条件启用：@supports (display: grid) { .grid-layout { @apply grid; } } -
aspect-ratio必须手写 padding hack，Tailwind 不会自动降级 -
important: true或prefix配置对语义缺失问题完全无效
验证是否真生效，别信开发时热更新
最可靠的方式是运行 npm run build（或对应构建命令），打开 dist/assets/*.css，搜索 -ms-、-webkit-、-moz-。如果一个都找不到，说明配置链断在某处——大概率是 browserslist 没命中、插件顺序错、或构建流程绕过了 PostCSS。
IE11 的兼容不是“加个前缀就完事”，而是从配置到语义降级的完整链路，任何一个环节松动，样式就直接消失。
