Tailwind类在iOS Safari“写了却没效果”是因旧版Safari（iOS 13.3及更早）不解析display: flex、aspect-ratio等属性，直接标为invalid；需手动加-webkit-前缀或降级方案，如@supports not (aspect-ratio: 1/1)、[&::-webkit-scrollbar]:hidden等，且:hover伪类在触控设备上根本不可用。
为什么Tailwind类在iOS Safari里“写了却没效果”
不是编译失败，也不是你漏写了类名，而是旧版Safari（iOS 13.3及更早）压根不识别display: flex、aspect-ratio、overscroll-behavior这些属性——连解析都不解析，DevTools里直接标为invalid或灰色。Tailwind生成的flex、aspect-square、overscroll-behavior-contain类，原样输出后被浏览器静默忽略。
哪些Tailwind类必须手动补-webkit-前缀
Autoprefixer默认不补，除非.browserslistrc明确包含ios_saf >= 11.3或safari >= 10。但即使配了，以下类仍需手写动态伪类语法才能生效：
-
aspect-ratio：Safari 15.4之前完全不支持，改用@supports not (aspect-ratio: 1/1)降级 -
scrollbar-width: none：只认[&::-webkit-scrollbar]:hidden，且必须搭配overflow-y-auto -
text-overflow: ellipsis：父容器缺white-space: nowrap或overflow: hidden都不行 -
place-items/place-content：Safari 12–14简写不稳定，拆成justify-items+align-items
示例：<div class="[&::-webkit-scrollbar]:hidden overflow-y-auto">
移动端hover类为何永远不触发
iOS Safari和Android Chrome根本不实现:hover伪类——触控设备没有悬停物理动作。你在DevTools里看到hover:bg-blue-500被划掉，是因为伪类本身未激活，不是CSS没编译。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 别用
ontouchstart全局判断设备，iOS 17+桌面Chrome也会暴露该事件，误判率高 - 唯一可靠方案是
@media (hover: hover) and (pointer: fine)媒体查询 - 对应写法：
@media (hover: hover) and (pointer: fine) { .btn:hover { @apply bg-blue-600; } } -
active:只在“按下未松开”瞬间生效，松手即回退，不能替代hover的持续反馈
右侧黑边/水平滚动条不是overflow-x-hidden能解决的
加了overflow-x-hidden却仍有黑边，说明某个子元素宽度已突破视口——overflow-x-hidden只是掩盖症状，不是根治病因。
- 高危写法：
ml-40、mr-32、w-4/5在小屏下直接推内容出界 - 图片未设
max-w-full或w-full，原始尺寸溢出 - Flex容器内子项未设
min-w-0或flex-shrink，长文本撑宽容器 - 绝对定位元素
left/right值不当，或父容器transform干扰布局计算
快速诊断：Chrome DevTools → Rendering → 勾选Highlight overflows，红色标记处就是越界元凶。
真正卡住人的永远不是Safari本身，而是你写的ml-40没配断点、flex容器忘了min-w-0、或者content路径漏扫了.wxml文件——这些细节一旦漏掉，再全的兼容性配置也救不回来。
