必须运行npx browserslist验证输出是否含ios_saf 11.3、safari 12、ie 11等条目，未出现则构建时未触发前缀生成；同时确保postcss.config.js中tailwindcss在autoprefixer之前，且aspect-ratio等属性需手动降级。
Tailwind CSS 本身不自动解决跨浏览器兼容问题，必须靠 browserslist 显式声明目标、autoprefixer 正确补前缀、手动处理 Autoprefixer 无能为力的特性——三者缺一不可，否则旧 Safari 或 IE11 里连 flex 都不生效。
如何验证 browserslist 是否真命中旧 Safari/IE11
Autoprefixer 不会凭空补前缀，只响应 browserslist 明确声明的目标。写 last 2 versions 或 defaults，它默认跳过低市场份额的旧 iOS Safari 和已标记为 dead 的 IE11。
- 在项目根目录新建
.browserslistrc，内容必须严格包含：ios_saf >= 11.3<br>safari >= 10<br>IE 11
- 运行
npx browserslist，确认输出中出现类似ios_saf 11.3、safari 12、ie 11的条目；没出现，说明构建时压根没触发前缀生成 - 若用 Vite/Next.js/CRA，它们自带 PostCSS 配置可能覆盖你的
postcss.config.js，建议在autoprefixer配置里加overrideBrowserslist强制锁定
为什么 postcss.config.js 插件顺序不能错
Tailwind 必须在 autoprefixer 之前执行，否则生成的原始 CSS（如 display: flex）还没出来，autoprefixer 就无从扫描和补 display: -webkit-flex。
- 正确配置（对象形式，隐式顺序）：
module.exports = {<br> plugins: {<br> tailwindcss: {},<br> autoprefixer: {}<br> }<br>} - 错误配置：用数组写成
[autoprefixer, tailwindcss]，或把autoprefixer放前面 - 如果用了
postcss-preset-env，它内部也调用autoprefixer，需确认不重复或冲突；优先用对象形式避免歧义
哪些 Tailwind 类根本不会被 autoprefixer 处理
aspect-ratio、scrollbar-width、text-overflow、overscroll-behavior 等属性，Autoprefixer 官方不支持补前缀，Tailwind 也不提供对应工具类——必须手动干预。
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio：Safari 15.4 前完全不支持，改用@supports not (aspect-ratio: 1/1)+relative pt-[56.25%]降级 -
scrollbar-width：Safari 只认[&::-webkit-scrollbar]:hidden，且必须配合overflow-y-auto才保留滚动能力 -
text-overflow: ellipsis：Safari 要求父容器同时有white-space: nowrap和overflow: hidden，truncate类已内置，但自定义时容易漏掉任一 -
place-items：Safari 12–14 对简写支持不稳定，拆成justify-items-center align-items-center更可靠
为什么 Tailwind v4 在 Chrome 109 / iOS Safari ≤13.3 中大面积失效
v4 主动放弃对这些环境的支持，因使用 @layer、@property、oklch()、color-mix() 等原生不兼容特性——旧解析器直接忽略整条规则，不是样式错乱，是静默丢弃。
-
@layer base被 IE11 / iOS Safari ≤13.3 当作未知 at-rule，preflight 样式全失效 -
theme.colors.blue.500编译为color: oklch(50% 0.2 270)，Chrome 109 解析失败，整条声明被丢弃 -
postcss-preset-env或toColorSpace: 'srgb'无法解决语法层缺失，@layer和@property无任何 polyfill - 唯一稳态解：降级到
tailwindcss@3+daisyui@4，v3 输出纯 CSS2.1 + rgb/hsl，经大量旧环境验证
最易被忽略的点是：开发时热更新看着正常，不代表生产构建后 CSS 真带前缀或真降级。必须跑一次 npm run build，打开 dist/assets/*.css 搜索 -webkit- 或检查 aspect-ratio 是否被 @supports 包裹，才能确认问题根源是否真正解决。
