Tailwind CSS 自 v2.0 起放弃 IE11 支持，v3.0 彻底移除前缀生成；gap、grid、aspect-ratio 等特性 IE11 语义级不识别，加前缀无效；tailwind.config.js 中 prefix、important 等配置不影响兼容性；唯一可控环节是 postcss.config.js 中 tailwindcss → autoprefixer 顺序及 browserslist 显式声明 IE 11；需手动用 space-x/y 替代 gap、@supports 降级 grid、手写 padding-hack 实现 aspect-ratio。
Tailwind CSS 在 IE11 中“样式消失”，不是配置漏了，而是它根本没打算支持——v2.0 起已明确放弃 IE11，v3.0 更是连前缀都不加，直接输出 display: flex、gap、aspect-ratio 这类 IE11 完全不认识的语法。
IE11 不是“兼容性差”，是语义级不识别
Autoprefixer 加 -ms- 前缀只对有限语法有效（比如 flex → -ms-flexbox），但以下特性在 IE11 中：
- gap：Flex 容器下完全无效，加前缀也白搭
- grid：现代 display: grid 和 IE10/11 的 display: -ms-grid 是两套互不兼容的布局模型
- aspect-ratio：IE11 无任何等效属性，必须用 padding-top hack 模拟
- place-items、justify-content: center（Flex 场景）：IE11 只认 -ms-flex-pack: center，且需配合 display: -ms-flexbox
这些不是“加前缀就能好”的问题，是浏览器引擎压根没实现该 CSS 特性。
tailwind.config.js 里配 prefix 或 important 没用
这两个配置只影响生成的 class 名或选择器权重，和浏览器兼容性无关：
- prefix: 'tw-' → 生成 tw-flex，但 IE11 仍不认 display: flex
- important: true → 加 !important，但无效属性加再多次 ! 也没用
- target: 'ie11' 在 v3+ 已被移除，设了也忽略
别在 tailwind.config.js 里折腾兼容性，它不处理这事。
postcss.config.js 插件顺序和 browserslist 必须同时对
这是唯一能控制前缀是否生成的环节，但仅限于 autoprefixer 支持的语法：
- 插件顺序必须是 tailwindcss → autoprefixer，反了就无前缀
- browserslist 必须显式写 IE 11（不能写 not ie 或 <code>ie >= 11）
- 推荐直接在 postcss.config.js 里用 overrideBrowserslist，避免被框架默认配置覆盖
最小可行配置示例：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {
overrideBrowserslist: ['IE 11', 'Android >= 4.4', 'iOS >= 9']
}
}
}配完后务必运行构建命令（如 npm run build），打开 dist/assets/*.css 搜索 -ms- 确认是否真有前缀——开发时热更新看到的样式，可能只是现代浏览器渲染的假象。
真正要降级的不是 Tailwind，是你自己写的布局逻辑
Tailwind 不会帮你把 grid 降成 flex，也不会把 gap 拆成 margin。你得主动做：
- 用 space-x/space-y 替代 gap（它们编译为 margin，IE11 完全支持）
- 对 grid 布局包裹 @supports (display: grid)，里面写现代语法，外面写 flex 降级
- aspect-ratio 类必须手写 padding hack，Tailwind 不生成 fallback
- IE11 下慎用 hover、focus-visible 等伪类，它们依赖现代事件模型
最常被忽略的一点：Vite / Next.js / CRA 可能自带 PostCSS 配置，静默覆盖你的 postcss.config.js，导致你以为配好了，其实 autoprefixer 根本没跑。
