如何在 Tailwind CSS 中创建分组按钮？答案

【问题标题】：How to create a grouped buttons in Tailwinds CSS?如何在 Tailwind CSS 中创建分组按钮？
【发布时间】：2021-08-22 17:11:11
【问题描述】：

我正在尝试使用 Tailwind CSS 创建此输入布局，但我似乎没有发现 Tailwind CSS 默认支持此功能。

我该怎么做？

提前谢谢你。

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

您可以在父 div 上使用inline-flex，然后使用半径类rounded-l-md => 第一个按钮左侧具有中等半径，然后rounded-r-md在最后一个按钮上 => 中等半径的最后一个按钮右侧。

为第一个和最后一个按钮添加border，中心按钮仅添加顶部和底部边框。边框将是 1 像素宽的边框。

然后是边框颜色编号的变体，以获得边框颜色、背景颜色、悬停颜色、字体宽度和大小等...

您可以查看他们的documentation，其中有很好的示例记录。检查左侧的侧边栏以便快速浏览。

body {
  padding-top: 50px;
  display: flex;
  justify-content: center;
}

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<div class="inline-flex">
  <button class="bg-transparent text-md hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-8 border border-gray-400 hover:border-transparent rounded-l-md">
    Text Input
  </button>
  <button class="bg-transparent text-md hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-8 border-t border-b border-gray-400 hover:border-transparent">
    Text Input
  </button>
  <button class="bg-gray-300 text-md hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-6 border border-gray-400 hover:border-transparent rounded-r-md flex justify-between items-center">
    <span class="flex-initial">Select Box</span>

    <svg class="h-4 mx-3 flex-initial fill-current text-blue" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
      <g>
        <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
      </g>
    </svg>
  </button>
</div>

【讨论】：