使用 tailwind 时分段按钮的边框有问题答案

【问题标题】：Having problem with borders on segmented button using tailwind使用 tailwind 时分段按钮的边框有问题
【发布时间】：2022-11-25 15:40:10
【问题描述】：

尝试创建分段按钮，但边框有问题。我想到处都有 1px 的边框，包括按钮之间

第二个变体的结构（按钮动态呈现）

<div class="divide-x">
 <button class="border-y first:border-l last:border-r">
</div>

我尝试了多种边界方式

每个按钮上的第一个边框，但我在按钮之间有 2px，并且顺风我只能指定第一个/最后一个按钮来删除按钮之间的边框（我不想安装额外的库）
第 2 个 divide-x on parent + border-y + on child(button) first:border-r and last:border-r 由于某种原因 last:border-r 不适用并创建这样的东西

有什么建议么？

【问题讨论】：

你可以编辑你的帖子并添加 css 代码吗？ :)
在我的结构示例中添加顺风类

标签： javascript vue.js vuejs3 tailwind-css tailwind-ui

【解决方案1】：

根据您在项目中使用 Tailwind，您可以执行以下操作：

<div class="container">
  <button class="rounded-l-full border p-2">1</button>
  <button class="button border-y border-r p-2">2</button>
  <button class="button border-y p-2">3</button>
  <button class="rounded-r-full border p-2">4</button>
</div>

或者你可以看到这个tailwind playground?

【讨论】：