rounded-full 本身不生成圆形，只设 border-radius: 9999px；必须配合 w-12 h-12（等宽高）、overflow-hidden（同元素）和 object-cover（img 上）四者协同才生效，缺一则视觉仍为方或椭圆。
rounded-full 本身不生成圆形，只设 border-radius: 9999px
它不是“变圆指令”，而是“尽可能大的圆角值”。如果容器宽高不等、内容没裁剪、图片没缩放，浏览器照样渲染出椭圆或直角。DevTools 里能看到 border-radius: 9999px 被正确写入，但视觉上还是方的——说明问题不在类名拼写，而在配套缺失。
必须同时加这四个类，缺一不可
真正让头像变圆的是四者协同作用，不是单靠 rounded-full：
-
w-12 h-12（或任意相等值）：强制正方形盒模型；用aspect-square也可，但需 Tailwind v3.2+ -
rounded-full：提供足够大的圆角半径 -
overflow-hidden：必须和rounded-full加在同一个元素上，否则裁剪无效 -
object-cover：必须加在<img>上，防止拉伸或留白破坏圆形边界
常见错误是把 overflow-hidden 加在父 <div>，而 rounded-full 加在 <img> —— 两者不同层，圆角和裁剪完全脱节。
响应式或 UI 库下圆角突然失效
断点类如 sm:w-14 sm:h-14 sm:rounded-full 很容易漏掉 sm:overflow-hidden 和 sm:object-cover，结果小屏圆、大屏方。更隐蔽的是 DaisyUI 或 Headless UI 在 focus/hover 时注入的 ring 类，默认带 border-radius: 0，直接覆盖 rounded-full。
立即学习“前端免费学习笔记（深入）”；
检查 DevTools 的 Computed 标签页，看最终生效的 border-radius 是不是 0 或被划掉；如果是，点开来源，大概率是 ring、rounded-none 或自定义 reset 干扰。
Tailwind 构建阶段根本没生成这个类
DOM 里能看到 class="rounded-full"，但 Styles 面板里查不到对应 CSS 规则——说明 Tailwind 扫描器没在你的模板文件中发现这个字符串，压根没把它编译进 CSS 文件。
排查要点：
- 确认该 class 写在
content配置项指定的路径下（如src/**/*.{js,ts,jsx,tsx,html}） - 别写在 JS 字符串拼接里（如
className={`w-10 ${isRound ? 'rounded-full' : ''}`}），Tailwind 默认不扫描运行时拼接的字符串 - 检查是否误用了引号包裹导致语法错误，比如
class="rounded-full "多了个空格，某些构建工具会跳过
最稳妥的写法是直接硬编码：class="w-10 h-10 rounded-full overflow-hidden object-cover"，确保被静态扫描到。
