IE11不支持display: grid，仅识别2012草案版-ms-grid；Autoprefixer不自动降级Grid语法，需手动书写-ms-grid及相关属性，并用@supports提供fallback方案。
IE11根本不认识display: grid
不是样式错乱，是浏览器直接忽略整条声明。IE11 实现的是 2012 年草案版 CSS Grid（display: -ms-grid），和现代标准 display: grid 是两套互不兼容的语法体系。Tailwind 输出的 grid、grid-cols-3 等类，编译后仍是 display: grid，IE11 见到就跳过，连基本布局都不会渲染。
Autoprefixer 不会把 grid 降级成 -ms-grid
它只负责加前缀，比如把 transform 补成 -webkit-transform，但不会把现代 Grid 语法“翻译”成 IE 兼容写法。即使你在 postcss.config.js 里写了 overrideBrowserslist: ['IE 11']，Autoprefixer 也只会在你手写了 display: -ms-grid 的前提下，补上 -ms-grid-columns 这类属性——它不会无中生有。
- 你写
display: grid→ Autoprefixer 什么也不加 → IE11 不认 - 你写
display: -ms-grid→ Autoprefixer 可能补-ms-grid-columns→ IE11 能用
fr 单位、gap、place-items 在 IE11 中全无效
grid-template-columns: 1fr 2fr 在 IE11 里解析失败；gap 在 Flex 或 Grid 容器中加 -ms- 前缀也没用；place-items: center 对应的 -ms-flex-pack: center 必须配合 display: -ms-flexbox 才生效，且仅限 Flex 场景。
-
fr得手动换算成auto、100px或百分比 -
gap改用space-x/space-y（它们生成margin） -
place-items类在 IE11 下必须搭配display: -ms-flexbox+-ms-flex-pack手写
别指望 Tailwind 自动降级，得自己写 @supports 或 fallback
Tailwind 不会根据浏览器能力自动切换语法。唯一可控路径是：用 @supports (display: grid) 包裹现代 Grid 类，同时提供 Flex 或 float 降级方案；或者彻底放弃 Grid，在 IE11 环境里只用 Flex + space-x + 手写 -ms- 属性。
立即学习“前端免费学习笔记（深入）”；
- 不要在
tailwind.config.js里设prefix或important，它们对兼容性零影响 - 构建后务必打开
dist/下的 CSS 文件，搜索-ms-grid—— 如果没出现，说明你根本没写 IE 兼容源码 - Vite / Next.js 可能静默覆盖
postcss.config.js，要确认 Autoprefixer 真被加载且顺序在tailwindcss之后
