怎样修复Tailwind CSS在旧版浏览器不兼容问题：集成Autoprefixer自动补全

Tailwind CSS v3.0+ 默认不添加浏览器前缀，必须正确配置 browserslist（如 IE 11、Android >= 4.4）并确保 PostCSS 插件顺序（tailwindcss 在前，autoprefixer 在后），否则 gap、grid 等新属性在老旧浏览器中会被完全忽略。

许多现代 CSS 属性如 flex、gap、place-items 在 IE11 或 Android 4.4 WebView 中根本不被识别，而非样式错乱。单纯安装 autoprefixer 无法解决问题，必须同时配置 browserslist 并保证 PostCSS 插件顺序正确，否则构建出的 CSS 中连一个 -ms- 前缀都没有。

为什么 autoprefixer 没生效？检查 browserslist 配置

Autoprefixer 不知道该给谁加前缀，全靠 browserslist 决策。常见错误是只改了 tailwind.config.js，却在项目根目录缺少 .browserslistrc 或 package.json 中的 browserslist 字段。

1. IE 11 必须显式写入“IE 11”（不可使用 ie >= 11，autoprefixer 无法识别）
2. Android 4.4 WebView 应写为“Android >= 4.4”
3. iOS 9+ 写为“iOS >= 9”
4. 避免使用模糊表达如 last 2 versions，因为会跳过 IE11

IE 11
Android >= 4.4
iOS >= 9
> 1%
not dead

postcss.config.js 插件顺序错了会导致前缀丢失

Tailwind 必须在 autoprefixer 之前运行，否则它生成的标准属性还没出来，autoprefixer 就无从下手。

1. ✅ 正确顺序：tailwindcss → autoprefixer → 其他（如 postcss-preset-env）
2. ❌ 错误顺序：autoprefixer 在 tailwindcss 前面，导致前缀空跑
3. Vite / Next.js / CRA 可能自带 PostCSS 配置，需检查是否覆盖了自定义的 postcss.config.js

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }

gap / grid / aspect-ratio 这些属性加前缀也没用

autoprefixer 只补语法前缀（比如 -webkit-flex），但 gap 在 Flex 容器中 IE11 根本不支持，加 -ms- 无效；grid 的 -ms-grid 和现代 display: grid 是两套互不兼容的语法。

1. 使用 space-x/space-y 替代 gap（编译为 margin，IE11 兼容）
2. 对于 grid，使用 @supports (display: grid) 条件启用，降级用 flex
3. aspect-ratio 必须手写 padding hack，Tailwind 不会自动降级
4. 不要依赖 important: true 或 prefix 配置解决语义缺失

验证是否真生效：别信开发时热更新，看构建后 CSS 文件

最可靠的方式是运行 npm run build（或对应构建命令），打开 dist/assets/*.css，搜索 -webkit-、-ms-、-moz-。如果一个都没搜到，说明整个链路断了——不是 Tailwind 问题，是 PostCSS 配置或 browserslist 没走通。

生产环境尤其需要警惕，CI 或 Docker 构建时 browserslist 配置可能被缓存或缺失，务必在每次上线前手动检查生成的 CSS 文件中是否包含 -webkit- 等前缀，确保整个链路畅通。