tailwind css 在 ie11 中样式消失是因为 v3.0+ 默认不生成兼容代码，需通过正确配置 browserslist（如 "ie 11"）、确保 autoprefixer 在 postcss.config.js 中位于 tailwindcss 之后，并手动处理 gap/grid/aspect-ratio 等 ie11 不支持的特性。
autoprefixer 没生效？先确认 browserslist 是否真命中 IE 11
Autoprefixer 不会自动支持 IE11，它只响应 browserslist 配置。常见错误是写了 ie >= 11 或依赖 last 2 versions，但 autoprefixer 官方不识别 ie 别名，且 IE11 已被标记为 dead，默认直接排除。
- 必须在项目根目录新建
.browserslistrc，内容严格写成：IE 11
- 或在
package.json中加字段："browserslist": ["IE 11"]
- 验证是否生效：运行
npx browserslist，输出里必须包含ie 11（注意是小写ie，但配置里必须大写IE）
postcss.config.js 插件顺序错，等于白配
Tailwind 输出原始 CSS 属性（如 display: flex），autoprefixer 才负责扫描并补 display: -ms-flexbox。如果顺序反了，autoprefixer 就什么也扫不到。
- ✅ 正确顺序（CommonJS 格式）：
module.exports = { plugins: { tailwindcss: {}, autoprefixer: { overrideBrowserslist: ['IE 11'] } } } - ❌ 错误写法：
autoprefixer放在tailwindcss前面，或用数组形式但未指定顺序 - Vite / Next.js / CRA 可能自带 PostCSS 配置，会静默覆盖你的
postcss.config.js，建议用overrideBrowserslist直接写死目标，绕过框架默认值
gap / grid / aspect-ratio 这些属性加前缀也没用
Autoprefixer 只补语法前缀（比如 flex → -ms-flexbox），但 IE11 根本不支持 gap 在 flex 容器中，-ms-gap 不存在；display: grid 和 IE10/11 的 display: -ms-grid 是两套互不兼容的系统。
-
gap→ 改用space-x/space-y（编译为margin，IE11 完全支持） -
grid→ 用@supports (display: grid)条件启用，降级方案用flex+margin -
aspect-ratio→ 必须手写 padding hack，Tailwind 不会自动降级 -
place-items、justify-items等在 IE11 无效，拆成justify-content+align-items更可靠
构建后才看得见真实效果，开发时热更新不可信
开发服务器（Vite dev / Webpack dev server）常走内存编译路径，CSS 前缀可能被跳过或缓存。最可靠的验证方式是跑一次完整构建。
- 执行
npm run build（或对应命令），打开dist/assets/*.css - 搜索
-ms-，至少应看到类似display: -ms-flexbox、-ms-flex-align: center - 如果一个
-ms-都没有，说明配置链断了：要么browserslist没命中，要么postcss.config.js没加载，要么插件顺序错了
gap 在 flex 里就是 IE11 的硬伤，你得手动换方案，而不是指望配置多加一行就能解决。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
