Tailwind CSS v3.0起默认不加浏览器前缀，需手动配置PostCSS、Autoprefixer及browserslist目标（如IE 11），且Autoprefixer仅补语法前缀，对gap、grid等语义缺失特性无效，须自行降级处理。
Tailwind默认不加前缀，旧版浏览器直接失效
Tailwind CSS 从 v3.0 开始默认关闭自动添加浏览器前缀（autoprefixer），只输出标准 CSS 属性。这意味着 flex、gap、place-items 等属性在 IE11 或 Android 4.4 WebView 中会完全不生效——不是样式错乱，是根本被忽略。
关键点在于：Tailwind 自身不处理兼容性，它依赖 PostCSS 生态链里的 autoprefixer 插件来补前缀，而这个插件必须显式启用并配置目标浏览器范围。
必须手动配置PostCSS + Autoprefixer，且browserslist不能省
仅安装 autoprefixer 不够，它需要知道“给谁加前缀”。这个决策由项目根目录的 browserslist 配置文件（或 package.json 中的 browserslist 字段）驱动。
常见错误是只改了 tailwind.config.js 却没配 browserslist，结果 autoprefixer 默认按 “> 1%, last 2 versions, not dead” 处理，依然跳过 IE11。
立即学习“前端免费学习笔记（深入）”；
- 要在
browserslist中明确写入旧版目标，例如：IE 11 Android >= 4.4 iOS >= 9
- 确保
postcss.config.js正确加载autoprefixer：module.exports = { plugins: { 'autoprefixer': {}, // Tailwind 必须在 autoprefixer 之前（顺序重要） tailwindcss: {}, } } - 如果用 Vite / Next.js / Create React App，注意它们可能自带 PostCSS 配置，需检查是否覆盖或禁用了你的设置
gap、grid、aspect-ratio 这类属性光靠前缀没用
Autoprefixer 只能补语法前缀（如 -webkit-flex），但像 gap 在 Flex 布局中 IE11 根本不支持，加 -ms- 前缀也无效；aspect-ratio 在 Chrome 88+ 才原生支持，旧版只能靠 padding hack 模拟。
这类情况 Tailwind 不会降级，你得自己干预：
- 对
gap：避免在 IE11 场景下用于flex容器，改用space-x/space-y工具类 - 对
grid：IE10/11 的-ms-grid语法和现代grid不兼容，建议用@supports条件性启用：@supports (display: grid) { .grid-layout { @apply grid; } } - 开启 Tailwind 的
important或prefix选项无助于解决语义缺失问题，别白费力气
构建后务必检查生成CSS里有没有前缀
最可靠的验证方式不是看开发时热更新效果，而是构建生产包后打开 dist/assets/*.css，搜索 -webkit-、-ms-、-moz-。如果一个都没出现，说明 autoprefixer 没生效或 browserslist 配错了。
容易被忽略的是：某些打包工具（如 Webpack 的 mini-css-extract-plugin）会把 PostCSS 配置隔离在不同 loader 链中，导致 CSS 提取阶段绕过了 autoprefixer。这时候得在 css-loader 或 postcss-loader 的 options 里单独声明插件。
另外，Tailwind 的 jit（v2.1+ 的默认模式）在开发时只生成用到的类，但不影响 autoprefixer 行为；真正影响前缀输出的是最终 CSS 内容 + browserslist 组合。
