tailwind css v3.0+ 默认不为ie11生成兼容前缀，需通过autoprefixer配合显式配置browserslist（如“ie 11”）并确保postcss.config.js中tailwindcss在autoprefixer之前运行，且gap/grid/aspect-ratio等特性须手动降级。
Tailwind CSS v3.0+ 在 IE11 里样式“消失”，不是漏加前缀，而是压根没生成任何兼容代码——它默认不输出 -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.config.js 未加载、或插件顺序错了。
真正容易被忽略的是：即使前缀加上了，gap、grid、aspect-ratio 这些特性本身在 IE11 中就是语义缺失，必须用替代方案手动降级，而不是寄希望于工具链自动处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
