tailwind css v3.4 中 aspect-ratio 已是稳定内置特性，但需确保 jit 模式启用、content 配置覆盖所有模板路径、避免动态拼接类名、版本≥v3.3 且浏览器支持（chrome 88+/safari 15.4+）。
aspect-ratio类根本没生成 CSS 规则
最常见的情况是：你在 HTML 里写了 aspect-video，但 DevTools 的 Styles 面板里完全搜不到 aspect-ratio 这个属性——说明 Tailwind 根本没把这类名编译进最终 CSS。
原因几乎总是 content 配置漏掉了模板路径。比如你用 React，但 tailwind.config.js 里只写了 ./index.html，没加 ./src/**/*.{js,jsx,ts,tsx}，JIT 引擎就看不到 JSX 中的 aspect-[16/9] 字符串，自然不生成对应规则。
- 检查
content数组是否覆盖所有含 class 的文件（.vue、.tsx、甚至 Markdown 中的 HTML 片段） - 动态拼接类名会失效：
className={`aspect-[${w}/${h}]`}→ JIT 扫描不到具体值，必须写死或用条件判断 - Tailwind v3.2 及更早需手动开启实验性支持：
experimental: { aspectRatio: true }；v3.3+ 默认启用，但别信“默认”二字，确认版本：npm list tailwindcss
浏览器不支持 aspect-ratio 属性
就算 CSS 规则生成了，aspect-ratio: 16 / 9 在旧浏览器里就是无效声明。Chrome
验证方法：打开 DevTools → Elements → Computed → 搜索 aspect-ratio。如果没出现，或显示为 unset，先看浏览器版本，再查兼容性表。
- Safari 15.3 及更早：斜杠语法
aspect-[16/9]极不稳定，推荐改用小数：aspect-[0.5625] - IE 完全不支持，且无 polyfill；如需兼容，得退回到
aspect-w-16 aspect-h-9插件方案 - 注意：即使浏览器支持，若元素
display是flex、grid或table，aspect-ratio也会被忽略（它只对block和inline-block有效）
父容器没提供可测量的宽度
aspect-ratio 不是魔法，它需要一个明确的宽度来推导高度。如果父容器 width 是 auto 且没设 max-width、flex-basis 或 grid 列宽，那么计算出的高度就是 0 —— 容器“消失”了。
典型错误：<div class="aspect-video"><img></div>，外层 div 没任何宽度约束。
- 必须显式给容器设宽：
w-full、max-w-md、flex-1、grid-col-span-2 - 避免在 flex 容器的直接子项上单独依赖
aspect-ratio：子项默认display: flex，导致比例失效 - 图片内容要配合：
class="w-full h-full object-cover"；漏掉w-full，图片不拉伸，容器高度就算算出来也看不见
用了插件却和内置类冲突
如果你手动装了 @tailwindcss/aspect-ratio 插件，又没关掉内置的 aspectRatio 功能，两个方案会打架：插件生成 padding-top + position: relative，内置类生成 aspect-ratio 属性，结果互相覆盖或都不生效。
解决方案很直接：二选一，别混用。
- 用插件方案：在
tailwind.config.js中禁用内置功能：corePlugins: { aspectRatio: false }，再引入插件 - 用内置方案：删掉插件，确保
content正确、浏览器支持、容器有宽 - 插件的响应式写法是
md:aspect-w-4 md:aspect-h-3，不是md:aspect-[4/3]—— 后者是内置类语法，插件不认
最容易被忽略的一点：你以为加了 aspect-video 就万事大吉，其实它只是个“承诺”，真正兑现这个承诺的前提是——父容器宽度落地、浏览器认得这个属性、Tailwind 真把它编译出来了。三者缺一，它就静默失效，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
