Tailwind边框与间距问题：实现底边框圆角及文本与边框间距

核心实现思路 #

• 不使用原生border-bottom实现底部装饰线：原生单边框无法单独设置圆角效果，改用子块元素模拟底部横线，可自由控制圆角、厚度、宽度参数
• 文本与底部横线的间距可通过调整文本底部内边距、横线的顶部外边距两个维度灵活控制

完整可运行代码 #

<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-center
                  justify-end
                  h-20
                  w-28
                  text-white
                  font-regular
                  pb-2
                ">
          Personal Details
          <!-- 模拟底部带圆角的边框 -->
          <div class="w-full h-1 bg-white rounded-full mt-1"></div>
        </button>
        <button class="
                  inline-flex
                  flex-col
                  items-center
                  justify-end
                  h-20
                  w-28
                  text-white
                  font-regular
                  pb-2
                  mr-10
                  ml-10
                ">
          Contact Details
          <div class="w-full h-1 bg-white rounded-full mt-1"></div>
        </button>
        <button class="
                  inline-flex
                  flex-col
                  items-center
                  justify-end
                  h-20
                  w-28
                  text-white
                  font-regular
                  pb-2
                ">
          Other Details
          <div class="w-full h-1 bg-white rounded-full mt-1"></div>
        </button>
      </div>
    </div>
  </div>
</div>

参数调整说明 #

• 调整文本与底部边框间距：修改按钮的pb-*属性值，或者修改底部装饰线的mt-*属性值，数值越大间距越大
• 调整底部边框圆角：修改装饰线的rounded-*属性值，比如rounded-sm、rounded-lg、rounded-full对应不同圆角效果
• 调整底部边框厚度：修改装饰线的h-*属性值，数值越大边框越厚
• 调整底部边框宽度：修改装饰线的w-*属性值，比如w-4/5可以实现比按钮宽度更窄的边框效果

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