rounded-full生效需元素具备可渲染体积：必须有宽高、背景或边框，且避免overflow:hidden裁剪、类冲突及深色模式顺序错误。
rounded-full 能做出圆角按钮，但直接加这个类往往没效果——它只设 border-radius，不负责撑尺寸、不处理背景、也不管你有没有内容。
为什么按钮加了 rounded-full 还是直角？
最常见原因是元素没有「可渲染的视觉体积」：
- 按钮是空的，或只含文字但没设置
padding，导致高度塌缩，border-radius: 9999px失效 - 用了
h-8这类固定高度，但宽度远大于高度（比如w-32 h-8），结果是椭圆而非胶囊 - 父容器有
overflow: hidden，而圆角被裁掉——这时得确认rounded-full是加在最外层按钮上，不是子元素 - 深色模式下圆角边缘发灰？检查
dark:bg-是否写在bg-后面，否则暗色背景没覆盖到圆角区域
胶囊按钮必须配对使用的类
单靠 rounded-full 不够，它需要「高宽比 + 内边距 + 背景」共同生效：
- 用
px-4 py-2或px-6 py-1.5撑起高度，避免文字贴边 - 搭配
text-sm或text-base，别用text-xs配大py，否则按钮显得空洞 - 必须有
bg-或border-，纯透明按钮加rounded-full看不出变化 - 图标+文字混合时，加
flex items-center比只靠py更可靠；SVG 图标记得加inline-block align-middle
Vue/React 中类名覆盖失效怎么办
在组件里同时写 rounded-md 和 rounded-full，浏览器按 CSS 文件中声明顺序决定谁生效，不是 HTML 里 class 的书写顺序：
立即学习“前端免费学习笔记（深入）”；
- Tailwind 默认把
rounded-md输出在rounded-full前面，所以后者会被前者覆盖 - 不要在同一个元素上共存逻辑冲突的圆角类，改用条件控制：比如
v-if="isPill" class="rounded-full"，或用computed动态拼接唯一类名 - 如果用
@layer components定义了全局.btn，再想单个按钮变直角，得用rounded-none !important——但更推荐加个btn-plain类覆盖，避开!important
真正容易被忽略的前提
rounded-full 生效的前提，是元素得是个「盒」：有明确宽高、有背景或边框、没被父级 overflow: hidden 裁掉、且没和其他同类属性类（如另一个 rounded-）冲突。它不是魔法，只是给 border-radius 设了个极大值——剩下的事，得你来填。
