safe-area-inset-* 在 iOS 旧版 Safari 中仅支持四个基础变量且需配合 padding/margin 使用；Tailwind 不预生成对应工具类，须通过 theme.extend.spacing 注入 env() 值并用方括号语法调用，同时确保 viewport-fit=cover 及 @supports 降级。
为什么 safe-area-inset-* 在 iOS 上不生效
不是 Tailwind 写漏了，是 env() 函数本身在旧版 Safari（iOS 11.0–14.7）中只支持 safe-area-inset-top 等四个基础变量，且必须配合 padding 或 margin 使用；Tailwind 默认不生成 env(safe-area-inset-*) 对应的工具类，因为它是运行时环境变量，不是静态 CSS 值，无法被 PurgeCSS 安全识别或预编译。
如何安全添加 safe-area-inset 工具类
不能靠 @layer utilities 直接写 .pt-safe 这种简写——它会丢失设备适配逻辑。必须用 Tailwind 的 theme.extend.spacing 注入动态值，并确保构建时保留 env() 调用：
- 在
tailwind.config.js的theme.extend.spacing中添加：
safe: 'env(safe-area-inset-top, 0px)', safe-x: 'env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px)', safe-y: 'env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px)'
- 这样你就能用
pt-[theme(spacing.safe)]或px-[theme(spacing.safe-x)]——注意必须带方括号语法，否则 Tailwind 不解析env() - 别用
pt-safe这类自定义 class，它无法响应不同机型的 inset 值变化 - 真机测试必须覆盖 iPhone X–iPhone 15 Pro（含 Dynamic Island），模拟器里的 safe area 是假的
哪些场景必须手动加 env()，不能只靠 padding-top
env(safe-area-inset-*) 不是装饰性补丁，而是布局刚需。以下情况绕不开：
- 全屏 WebView 底部按钮被 Home Indicator 遮挡 → 必须用
pb-[theme(spacing.safe-bottom)] - 导航栏高度需适配刘海/灵动岛 →
h-[calc(100vh-env(safe-area-inset-bottom))]比固定h-screen更可靠 - 滚动容器需留出底部安全区 →
pb-[theme(spacing.safe-bottom)]+overscroll-behavior: contain（后者 Tailwind 无对应类，得手写） -
fixed元素贴底时，仅bottom-0会钻进 Home Indicator 下方，必须叠加pb-[theme(spacing.safe-bottom)]
兼容性与降级的关键细节
iOS 15+ 支持 env(safe-area-inset-*) 完整，但 iOS 14.5 及更早版本对 env(safe-area-inset-bottom) 返回 0px（即使有 Home Indicator）。所以不能只依赖它：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
@supports (padding: env(safe-area-inset-top))做 CSS 降级，比如 fallback 到pb-8 - Tailwind 的
supports-工具类不支持env()检测，得手写@layer components - 微信 X5 内核（iOS）部分版本会把
env()解析为0px，哪怕设备有刘海——必须真机测微信 - Android WebView 不支持
env()，所有 safe-area 逻辑需包裹在@supports中，否则整条规则被丢弃
实际项目里最容易忽略的是：安全区域不是“加个 padding 就完事”，它是动态的、设备相关的、且和 viewport 配置强耦合。你写了 pt-[theme(spacing.safe)]，但没在 <meta name="viewport"> 里加 viewport-fit=cover，那 env() 就永远返回 0。
