tailwind css 在旧浏览器中样式消失，根本原因是构建未生成兼容代码：需配置 .browserslistrc 精确指定 ie11、ios 11.3 等目标，确保 autoprefixer 正确执行；postcss.config.js 中 autoprefixer 必须置于 tailwindcss 之后；gap/grid/aspect-ratio 等特性需手动降级为 margin/flex/padding hack；最终必须通过构建产物验证 -ms-/-webkit- 前缀是否存在。
Tailwind CSS 在 IE11、Android 4.4 WebView 或旧版 Safari（如 iOS 13.3）中“样式消失”，不是类名写错了，而是构建时压根没生成任何兼容代码——v3.0+ 默认跳过前缀，且 gap、grid、aspect-ratio 这些特性加前缀也无效。
autoprefixer 没生效？先确认 browserslist 是否真命中目标浏览器
Autoprefixer 不会自动猜你要支持谁，它只响应 browserslist 配置。IE11 已被标记为 “dead”，last 2 versions 或 > 1% 默认直接跳过。
- 必须在项目根目录新建
.browserslistrc，内容严格写成：IE 11<br>Android >= 4.4<br>iOS >= 9<br>ios_saf >= 11.3
- 或在
package.json中加字段："browserslist": ["IE 11", "ios_saf >= 11.3"] - 运行
npx browserslist，输出里必须出现ie 11（小写）或ios_saf 11.3—— 否则整个链路从第一步就断了
postcss.config.js 插件顺序错，等于白配
Tailwind 输出原始属性（如 display: flex），autoprefixer 才负责扫描并补 display: -ms-flexbox。顺序反了，autoprefixer 就无从下手。
- ✅ 正确写法（CommonJS 格式）：
module.exports = {<br> plugins: {<br> tailwindcss: {},<br> autoprefixer: { overrideBrowserslist: ['IE 11', 'ios_saf >= 11.3'] }<br> }<br>}; - ❌ 错误写法：
autoprefixer放在tailwindcss前面；或用数组形式但未控制执行顺序 - Vite / Next.js / CRA 可能自带 PostCSS 配置，静默覆盖你的
postcss.config.js—— 推荐用overrideBrowserslist直接写死目标，绕过框架默认值
gap / grid / aspect-ratio 加前缀也没用，必须手动降级
autoprefixer 只补语法前缀（比如 flex → -ms-flexbox），但 IE11 根本不支持 gap 在 flex 容器中，-ms-gap 不存在；display: grid 和 IE10/11 的 display: -ms-grid 是两套互不兼容的系统。
-
gap→ 改用space-x/space-y（编译为margin，IE11 完全支持） -
grid→ 用@supports (display: grid)条件启用，降级方案用flex+margin -
aspect-ratio→ 必须手写 padding hack，Tailwind 不会自动降级 -
place-items在 IE11 和旧 Safari 中无效，拆成justify-content+align-items更可靠
开发时看着正常，不代表生产环境生效
开发服务器（Vite dev / Webpack dev server）常走内存编译路径，CSS 前缀可能被跳过或缓存。热更新不可信，必须靠构建产物验证。
- 运行
npm run build（或对应构建命令） - 打开
dist/assets/*.css，搜索-ms-、-webkit-—— 如果一个都找不到，说明配置链断在某处 - 常见断点：browserslist 没命中、
postcss.config.js被框架覆盖、插件顺序错误
最易被忽略的是：你改了配置却没跑构建，或者以为加了 prefix: 'tw-' 就万事大吉——它对兼容性毫无帮助，真正起作用的是 browserslist + autoprefixer + 手动降级三者的配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
