加了rounded-full头像还是方的，是因为该类仅设border-radius:9999px，不裁剪溢出内容、不控制图片缩放；必须配合等宽高（如w-12 h-12）、overflow-hidden和object-cover三者协同生效。
rounded-* 类本身不裁剪内容，只设 border-radius；图片圆角不生效，99% 是因为缺少 overflow-hidden 或 object-fit 控制。
为什么加了 rounded-full 头像还是方的
它只声明 border-radius: 9999px，但不会自动裁掉图片溢出部分，也不会约束图片缩放行为。浏览器默认用 object-fit: fill 拉伸填充容器，宽高不等时直接变成椭圆，圆角视觉上就“消失”了。
-
rounded-full必须和overflow-hidden写在同一个元素上（不能父 div 加裁剪、img 加圆角） -
img标签必须同时有object-cover，否则拉伸/留白破坏圆形边界 - 容器必须是正方形：
w-12 h-12可行，w-12 h-10就会出椭圆 - 响应式写法如
sm:w-14 sm:h-14 sm:rounded-full，漏掉sm:overflow-hidden就会在大屏变方
DevTools 里 border-radius 显示为 0 或带删除线
说明该样式被覆盖或未解析。常见干扰源：
- UI 库（如 DaisyUI、Headless UI）在 focus/hover 或暗色模式下注入的
ring类，自带border-radius: 0 - 误写成
rounded-none，或用了非法值如border-radius: -2px（浏览器静默丢弃整条声明） - 自定义 reset.css 或 button 重置规则强行设了
border-radius: 0 - 必要时可用
!rounded-full强制，但仅限兜底，别滥用
类名存在但样式完全不渲染
DOM 中能看到 class，但 Styles 面板查不到对应 CSS 规则——Tailwind 构建阶段根本没生成这条样式。
-
content路径没覆盖到文件：比如用了 TSX 却只配了"./src/**/*.js"，漏掉.tsx - 动态拼接类名如
className={`rounded-${size}-full`}，Tailwind 静态扫描无法识别，必须进safelist，例如/rounded-[a-z]+-full/ -
@tailwind utilities在 CSS 文件里只是注释，说明 PostCSS 插件链断了，检查postcss.config.js是否含require('@tailwindcss/postcss') - 改完
tailwind.config.js没重启开发服务器，Node.js 和 PostCSS 缓存还在用旧配置
真正卡住人的从来不是“怎么加类”，而是把 rounded-full 当成独立开关——它必须和 overflow-hidden、等宽高、object-cover 绑定使用；而构建层面的失效，往往藏在 content 路径或动态类名的预声明里，这些地方一漏，连 debug 都找不到入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
