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