Tailwind CSS 在旧浏览器中样式消失的根本原因是未正确配置 Autoprefixer：v3.0+ 移除内置前缀，需在 postcss.config.js 中显式启用 autoprefixer 并指定 IE 11 等目标，且插件顺序必须为 tailwindcss → autoprefixer。
Tailwind CSS 在 IE11、Android 4.4 WebView 等旧环境里样式完全不生效，不是错乱，是“消失”——根本原因不是漏写前缀，而是你没配 Autoprefixer，或配了但目标浏览器没对上。
为什么 Tailwind 默认不加 -ms-、-webkit- 前缀
Tailwind CSS v3.0+ 彻底移除了内置前缀逻辑，它只输出标准 CSS（如 display: flex），把加前缀这件事全权交给 autoprefixer 插件。如果你没在构建流程中启用它，或者它不知道你要支持 IE11，那生成的 CSS 就真的只有那一行——旧浏览器直接忽略。
常见错误现象：flex、justify-center、place-items 类在 IE11 里完全没效果；检查开发者工具的 Styles 面板，发现对应元素根本没有渲染出任何 display: -ms-flexbox 或 display: -webkit-box。
- 仅安装
autoprefixer不够，它必须被 PostCSS 加载且排在tailwindcss之后（顺序错误会导致前缀不生效） -
tailwind.config.js里加prefix: 'tw-'或important: true对兼容性毫无帮助 - Vite / Next.js / CRA 可能自带 PostCSS 配置，会静默覆盖你的
postcss.config.js
postcss.config.js 必须显式声明 autoprefixer 并控制顺序
PostCSS 插件执行顺序决定前缀能否正确注入：tailwindcss 生成原始 CSS → autoprefixer 扫描并补前缀。顺序反了就白搭。
立即学习“前端免费学习笔记（深入）”；
正确配置（CommonJS 格式，适用于大多数项目）：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {
// 显式指定目标，避免依赖 browserslist 的默认值
overrideBrowserslist: ['IE 11', 'Android >= 4.4', 'iOS >= 9']
}
}
}- 用
overrideBrowserslist而非依赖外部.browserslistrc，防止被框架默认配置劫持 - 如果项目用 ESM（如
package.json有"type": "module"），改用postcss.config.cjs - Vite 用户可选在
vite.config.js中内联配置，但更推荐独立postcss.config.js，避免和 Vite 的 CSS 处理链耦合过深
browserslist 配置必须精确匹配旧版目标
autoprefixer 的行为完全由 browserslist 驱动。默认值（如 > 1%, last 2 versions）会跳过 IE11，因为它已“死亡”（not dead）。你得手动把它拉回来。
在项目根目录建 .browserslistrc，内容必须包含明确旧版本：
IE 11 Android >= 4.4 iOS >= 9 Firefox ESR
- 不要写
ie >= 11或ie 11（语法无效），必须是IE 11（大写 IE，空格分隔） - 如果用
package.json声明，字段名是browserslist，值为数组："browserslist": ["IE 11", "Android >= 4.4"] - 运行
npx browserslist命令验证是否真命中 IE11 —— 输出里必须出现ie 11
gap / grid / aspect-ratio 这类属性光靠前缀没用
autoprefixer 只补语法前缀（如 -webkit-flex），但像 gap 在 Flex 容器中 IE11 根本不支持，加 -ms- 前缀也无效；grid 的 -ms-grid 和现代 grid 语法不兼容。
这类语义缺失问题，Tailwind 不会自动降级，你得自己干预：
- 避免对 IE11 使用
gap，改用space-x/space-y（它们编译为margin，IE 全支持） - 对
grid布局，用@supports (display: grid)条件性启用：@supports (display: grid) { .grid-layout { @apply grid; } } -
aspect-ratio在 Chrome 88+ 才原生支持，旧环境需用 padding-top hack，Tailwind 无法替代
真正容易被忽略的是：构建后必须打开 dist/assets/*.css 文件，搜索 -ms-、-webkit- 确认前缀真实存在——开发时热更新看到的样式，未必等于生产包里的结果。
