必须显式配置browserslist包含ios_saf >= 11.3或safari >= 10，并确保postcss.config.js中tailwindcss在autoprefixer之前执行，否则旧版safari会直接忽略display: flex等声明；aspect-ratio、scrollbar-width等属性需手动降级或加webkit伪类。
旧版 Safari（iOS 13.3 及更早、macOS Safari ≤14）会直接忽略 display: flex、justify-content 等声明，不是样式错乱，是整条 CSS 被丢弃——必须让 Autoprefixer 真正生成 -webkit- 前缀，且顺序和配置都得对。
检查 browserslist 是否真命中旧 Safari 版本
仅写 last 2 versions 或 defaults，Autoprefixer 默认跳过低市场份额的旧 iOS Safari。它不会凭空补前缀，只响应明确声明的目标。
- 在
.browserslistrc中显式加入ios_saf >= 11.3或safari >= 10 - 运行
npx browserslist，确认输出里包含类似ios_saf 11.3或safari 12的条目 - 若没出现，说明 Tailwind 构建时压根没告诉 Autoprefixer “要兼容这些版本”，后续所有前缀都是白忙
确保 PostCSS 插件顺序正确
Tailwind 必须在 Autoprefixer 之前执行，否则生成的 CSS 还没出来，Autoprefixer 就没东西可处理。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- Vite/Next.js/CRA 用户注意：它们自带 PostCSS 配置，可能覆盖你的
postcss.config.js - 正确配置示例：
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } } - 如果用了
postcss-preset-env，它内部也调用 Autoprefixer，需确认不重复或冲突
哪些类不能靠 Autoprefixer 自动修复？
aspect-ratio、overscroll-behavior、scrollbar-width、text-overflow 这些属性，Autoprefixer 根本不补前缀，Tailwind 也不提供对应工具类——得手动干预。
-
aspect-ratio：Safari 15.4 前完全不支持，必须用@supports not (aspect-ratio: 1/1)降级为padding-bottom方案 -
scrollbar-width：Safari 只认[&::-webkit-scrollbar]:hidden，且必须配合overflow-y-auto才有效 -
text-overflow: ellipsis：Safari 要求父容器同时有white-space: nowrap和overflow: hidden，缺一不可 -
place-items：Safari 12–14 对简写支持不稳定，建议拆成justify-items+align-items
构建后验证生成 CSS 是否真带前缀
开发时热更新看着正常，不代表生产环境生效。旧 Safari 不认的属性，在 DevTools 里会直接标为 invalid 或灰掉——但你得先看到生成的 CSS 才能确认问题根源。
- 运行
npm run build（或对应构建命令） - 打开
dist/assets/*.css文件，搜索-webkit-flex、-webkit-justify-content - 如果搜不到，说明前缀根本没生成；搜到了但页面仍不生效，大概率是声明顺序错了（带前缀的必须写在标准声明之前）
最容易被忽略的是：Autoprefixer 不处理语法缺失型特性（比如 gap 在 Flex 容器中 IE11 根本不支持），也不修复语义级限制（比如 overscroll-behavior 在 iOS Safari 中只对已滚动的容器生效）。这类问题没法靠加前缀解决，得换方案或加 @supports 降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
