胶囊按钮需配合足够内边距（如px-4 py-2）与text-sm/text-base文字，用flex items-center垂直居中，深色模式下dark:bg-须置于bg-之后，响应式优先调尺寸而非圆角。
胶囊按钮就是 rounded-full，但得配对使用
单独加 rounded-full 不一定出胶囊效果，关键看宽高是否匹配。如果元素高度远小于宽度（比如普通 <button>），rounded-full 会让左右两端变成半圆，上下边则被“压扁”成直线——这正是胶囊的视觉来源。
常见错误是只加 rounded-full 却没控制内边距或行高，导致文字贴边、圆角被截断，或者按钮看起来像拉长的椭圆而非饱满胶囊。
- 必须配合足够
px或py值，让高度撑起来，例如px-4 py-2或px-6 py-1.5 - 避免用
h-8这类固定高度类，它可能和rounded-full冲突（圆角半径超过高度一半时会失效） - 文字别用
text-xs配大内边距，容易让按钮显得空洞；text-sm或text-base更稳
文字居中和垂直对齐经常出问题
胶囊按钮里文字偏上、偏下，不是 Tailwind 的 bug，而是默认 line-height 和 padding 搭配不当。Tailwind 的 py 类控制的是上下内边距，不直接控制行高，所以即使上下 padding 相等，文字也可能视觉偏移。
- 优先用
flex items-center替代纯 padding 居中，尤其在图标+文字混合场景下更可靠 - 如果不用 flex，确保
py值与字体大小协调：比如text-sm（14px）配py-1.5（12px），text-base（16px）配py-2（16px） - 遇到图标按钮（如带
svg），记得给图标加inline-block align-middle，否则基线对不齐
深色模式下圆角颜色不一致？检查背景类顺序
写 bg-blue-500 dark:bg-blue-700 rounded-full 时，如果深色模式下边缘发灰或有浅色描边，大概率是背景没完全覆盖圆角区域——本质是 Tailwind 的 class 解析顺序影响了 CSS 层叠。
立即学习“前端免费学习笔记（深入）”；
- 把
dark:bg-*放在bg-*后面，确保暗色样式能正确覆盖 - 避免混用
bg-opacity和dark:bg-*，opacity 会作用于所有状态，容易让暗色背景变透明露出底层 - 如果用了
ring类（比如ring-2 ring-blue-300），记得也加对应暗色：dark:ring-blue-600，否则亮色 ring 在暗背景下特别刺眼
响应式胶囊按钮别靠 sm:rounded-full
想在小屏变直角、大屏变胶囊？别用 sm:rounded-full 加 rounded-none，这样在 sm 断点切换时，圆角会突兀消失，缺乏过渡感。而且多数胶囊按钮本就不该在手机上变直角——小屏更需要明确的点击区域和视觉锚点。
- 真正需要响应式的场景，通常是调整尺寸：
px-3 py-1.5 text-xs sm:px-4 sm:py-2 sm:text-sm - 如果真要 sm 以下取消圆角，用
rounded-lg sm:rounded-full，比rounded-none sm:rounded-full更安全（rounded-lg有兜底） - 注意
rounded-full在超小屏（如 xs）可能让按钮过窄，文字换行，此时应加whitespace-nowrap
胶囊按钮看着简单，但 rounded-full 的表现极度依赖周围类的组合，尤其是高度、行高、背景和暗色模式之间的耦合。调一个按钮花三分钟不奇怪，因为改一行 class 可能牵出三个视觉问题。
