如何用Tailwind实现边框重叠？解决增减按钮边框重复问题

你现在的问题是父元素和按钮都加了完整边框，导致重叠出现粗边框，调整方案如下：

核心思路是让父元素承担整体外边框，按钮只保留中间的分隔边框，同时匹配圆角样式，避免重复：

修改后的完整代码：

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <!-- 减号按钮：仅保留右侧分隔边框，圆角与父元素左侧对齐 -->
    <button type="button" class="h-10 w-10 rounded-l border-r border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      -
    </button>

    <input id="{id}" type="number" value="0" class="h-10 w-16 border-none text-center text-base font-semibold focus:outline-none" />

    <!-- 加号按钮：仅保留左侧分隔边框，圆角与父元素右侧对齐 -->
    <button type="button" class="h-10 w-10 rounded-r border-l border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      +
    </button>
  </div>
</div>

关键调整点：

• 移除按钮的完整border和-m-px，改为只加单侧边框（减号按钮加右边框，加号按钮加左边框），作为输入框和按钮之间的分隔线
• 给左右按钮分别设置rounded-l和rounded-r，让按钮的圆角和父元素的整体圆角完全匹配
• 父元素保留完整外边框，负责组件的整体边框样式

这样调整后，既实现了目标模板的样式，又不会出现边框重复的问题。

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