Tailwind 中的边界和间距

Question

我很难在文本下方的线上制作边框半径，而且我也有关于如何在文本和底线之间放置间距的问题。这是我的预期输出

Codepen -> Codepen

代码

<div class="
    min-h-screen
    flex
    items-center
    justify-center
    py-4
    px-4
    sm:px-6
    lg:px-6
    bg-black
  ">
  <div class="max-w-lg w-full space-y-8">
    <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
      <div class="flex flex-row justify-center">
        <button class="
                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                ">
          Personal Details
        </button>
        <button class="

                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                        mr-10
                  ml-10
                ">
          Contact Details
        </button>
        <button class="
                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                ">
          Other Details
        </button>
      </div>
    </div>
  </div>

</div>

Answer 1

更新：

和OP讨论了很久，OP发现上边没有弯曲（反正我没注意到），如下：

即使添加rounded-t-sm也解决不了，因为我们在按钮上添加bottom-border所以无法解决，唯一的解决方法是删除bottom-border 并添加 <hr> 并将其样式设置为线条。

更新代码：

<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
    <div class="max-w-lg w-full space-y-8">
        <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
            <div class="flex flex-row justify-center">
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
                    Personal Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular mr-10 ml-10">
                    Contact Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
                    Other Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                
            </div>
        </div>
    </div>
</div>

更新结果：

Playground

旧答案

不确定添加 border-radius 有什么困难，请尝试添加 rounded-sm，它会起作用。

如果你想在文本和行之间添加一些space，尝试在按钮上添加一些padding，我认为py-2会满足你的需要。

代码：

<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
    <div class="max-w-lg w-full space-y-8">
        <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
            <div class="flex flex-row justify-center">
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
                    Personal Details
                </button>
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white mr-10 ml-10">
                    Contact Details
                </button>
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
                    Other Details
                </button>
            </div>
        </div>
    </div>
</div>

结果：

Playground

Tailwind 中的边界和间距

Border and Spacing in Tailwind

css

tailwind-css

tailwind-ui

更新：

旧答案