如何去除Tailwind CSS按钮内部的白色像素？

问题原因 #

你看到的白色像素是多层边框/环叠加冲突导致的：.btn组件默认带了border-2 border-green-800，但你在按钮标签里又加了border-none，再加上.btn--bg的边框和按钮的ring-2，元素之间出现细微视觉缝隙，露出了背景白色。

修复步骤 #

1. 清理.btn组件的冗余边框
   修改CSS中.btn的样式，去掉默认边框设置，因为我们不需要它：

.btn {
  @apply relative flex min-w-[150px] justify-center overflow-hidden 
         rounded-full bg-transparent py-4 outline-none hover:bg-transparent;
}

2. 调整背景层的定位与层级
   把.btn--bg的定位改为inset-0（替代left-0 top-0，更精准覆盖整个按钮），同时调整z-index避免被其他元素遮挡：

.btn--bg {
  @apply absolute inset-0 z-[-1] box-border h-full w-full rounded-full border outline-none;
}

3. 简化按钮标签的类
   去掉冗余的border-transparent，因为已经有border-none：

<div class="p-8">
  <button class="btn green group border-none ring-2 ring-green-600 bg-transparent py-2">
    Button
    <div class="btn--bg green border border-green-600 transition-all group-hover:translate-y-full group-hover:opacity-0"></div>
  </button>
</div>

修改后，背景层会完全填充按钮内部，不会再出现缝隙导致的白色像素，同时保留原有的hover动画效果。

内容的提问来源于stack exchange，提问作者Chalist