Tailwind CSS v3.0+ 默认不加浏览器前缀，需正确配置 browserslist（如 IE 11、Android >= 4.4）和 PostCSS 插件顺序（tailwindcss → autoprefixer），否则 gap、grid 等新属性在旧浏览器中被忽略。
Tailwind CSS v3.0+ 默认不加浏览器前缀，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 字段。
- IE11 必须显式写入：
IE 11（不能写ie >= 11，autoprefixer 不认） - Android 4.4 WebView 要写：
Android >= 4.4 - iOS 9+ 写：
iOS >= 9 - 避免用模糊表达，比如
last 2 versions会跳过 IE11
示例 .browserslistrc：
IE 11 Android >= 4.4 iOS >= 9 > 1% not dead
postcss.config.js 插件顺序错了会导致前缀丢失
Tailwind 必须在 autoprefixer 之前运行，否则它生成的标准属性还没出来，autoprefixer 就无从下手。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：
tailwindcss→autoprefixer→ 其他（如postcss-preset-env） - ❌ 错误顺序：
autoprefixer在tailwindcss前面，结果是空跑 - 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 是两套互不兼容的语法。
- 用
space-x/space-y替代gap（它们编译为margin，IE11 完全支持） - 对
grid用@supports (display: grid)条件性启用，降级用flex -
aspect-ratio必须手写 padding hack，Tailwind 不会自动降级 - 别指望
important: true或prefix配置能解决语义缺失问题
验证是否真生效：别信开发时热更新，看构建后 CSS 文件
最可靠的方式是运行 npm run build（或对应构建命令），打开 dist/assets/*.css，搜索 -webkit-、-ms-、-moz-。如果一个都没搜到，说明整个链路断了——不是 Tailwind 问题，是 PostCSS 配置或 browserslist 没走通。
容易被忽略的是：某些 CI 环境或 Docker 构建镜像里，browserslist 配置可能被缓存或未挂载，导致生产包没前缀。每次上线前务必手动查一次生成的 CSS 文件。
