aspect-ratio 类在 Tailwind v3.3+ 中默认可用但无效，主因是父容器无显式宽度、Safari 旧版不支持或 JIT 未编译该类；需确保容器有宽度（如 w-full）、避免 height 冲突、用小数写法（如 aspect-[0.5625]）提升兼容性。
直接说结论：aspect-ratio 类在 Tailwind v3.3+ 中默认可用，但加了没效果，90% 是因为父容器没宽度、浏览器不支持、或类名没被 JIT 编译出来。
为什么 aspect-video 加了却没高度
这不是类名写错，而是 aspect-ratio 属性根本没生效。它需要一个明确的宽度基准来推导高度，宽度为 0 就算不出任何值。
- 父容器没设显式宽度（比如只写
<div class="aspect-video">，漏了w-full、max-w-md或flex-1） - 给
<img>标签本身加了aspect-video——这个类只对**容器元素**生效 - 容器或子元素写了
h-full、absolute、top-0 bottom-0，直接覆盖比例逻辑 - Safari 15.3 及更早版本不支持
aspect-ratio属性，且对aspect-[9/16]斜杠写法静默失败
怎么验证 aspect-ratio 是否真正编译进 CSS
打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio。如果没出现，或显示为 unset，说明 Tailwind 根本没生成该规则。
- 检查
tailwind.config.js的content字段是否覆盖所有模板路径（如"./src/**/*.{js,jsx,ts,tsx}"） - 避免动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 扫描不到，必须写死或用条件判断 - 运行
npm list tailwindcss确认版本 ≥ v3.3；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 确认没同时启用
@tailwindcss/aspect-ratio插件又没关掉内置功能，导致冲突
aspect-[x/y] 写法在 Safari 下为什么经常失效
斜杠语法看着直观，但在 Safari 15.4 之前解析不稳定，尤其构建后或某些 Vite/Webpack 配置下会静默失败，回退到无比例状态。
立即学习“前端免费学习笔记（深入）”；
- 推荐改用小数写法：
aspect-[0.5625]（即 9 ÷ 16），CSS 层面等价，兼容性更稳 - 动态计算时别拼字符串
"aspect-[" + w + "/" + h + "]"，先算好小数再注入 - 验证方式：Safari 开发者工具中查看 computed 样式里是否有
aspect-ratio: 0.5625 - 若需兼容 Safari 15.3 或更低版本，退回
pt-[56.25%]+relative/absolute方案，但二者不能混用
图片容器和 <img> 必须怎么配合才不拉伸
aspect-ratio 只管容器尺寸，不管内容怎么填。漏掉关键配合类，就会白写。
- 容器必须有明确宽度：
w-full、max-w-xs、flex-1等 -
<img>必须加w-full h-full object-cover（或object-contain），否则原始尺寸会破坏比例 - 避免在容器或子元素上写
height相关类（如h-48、h-full），它们会和aspect-ratio冲突 - 响应式切换示例：
aspect-square md:aspect-video w-full max-w-xs—— 小屏正方，中屏切 16:9，宽度随父级缩放
最容易被忽略的点，是检查父容器的宽度是否真正落地——哪怕只漏了一个 w-full，aspect-ratio 就彻底失效。别信“它应该能推出来”，CSS 不猜，只算。
