如何在 Tailwinds CSS 中创建分组按钮？

Question

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

我该怎么做？

提前谢谢您。

Answer 1

您可以在父 div 上使用

inline-flex

，然后使用半径类将边框半径放在第一个和最后一个角上

rounded-l-md

=> 第一个按钮左侧具有中等半径，然后在最后一个按钮上使用

rounded-r-md

=> 最后一个按钮右侧中等半径。

为第一个和最后一个按钮添加

border

，中心按钮仅添加 top 和 bottom 边框。 border 将是 1 像素宽的边框。

然后使用 border-color-number 的变体来获取边框颜色、背景颜色、悬停颜色、字体宽度和大小等...

您可以查看他们的文档，其中有详细的示例记录。查看左侧侧边栏可快速浏览。

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>

Answer 2

您可以在这里找到大量的组按钮 - https://tailwindgenie.com/tailwind-css-buttons