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

该效果可以通过原生Tailwind类组合实现，无需额外依赖，具体方法如下：

方案1：直接使用原生Tailwind类组合 #

<div class="flex items-stretch w-96 border border-gray-300 rounded-md overflow-hidden focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
  <!-- 前置标签 -->
  <span class="flex items-center px-3 py-2 bg-gray-100 text-gray-600 border-r border-gray-300 text-sm">
    https://
  </span>
  <!-- 输入框 -->
  <input type="text" class="flex-1 px-3 py-2 border-0 outline-none focus:ring-0 text-sm" placeholder="输入站点地址">
</div>

核心逻辑说明： #

• 父容器使用flex布局+overflow:hidden裁切子元素圆角，同时通过focus-within伪类实现整组聚焦时的高亮效果，和原生输入框交互逻辑一致
• 前置标签和输入框的边框做合并处理，避免出现双边框
• 输入框取消默认边框和聚焦外发光，样式完全交给父容器控制，避免样式冲突

方案2：高频使用场景自定义组件 #

如果该样式在项目中使用频率很高，可以在Tailwind配置文件中注册自定义组件，减少重复代码：

1. 打开tailwind.config.js添加组件配置：

const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.input-group': {
          display: 'flex',
          alignItems: 'stretch',
          border: '1px solid #d1d5db',
          borderRadius: '0.375rem',
          overflow: 'hidden',
          '&:focus-within': {
            borderColor: '#3b82f6',
            boxShadow: '0 0 0 1px #3b82f6',
          },
          '.input-group-prepend': {
            padding: '0.5rem 0.75rem',
            backgroundColor: '#f3f4f6',
            borderRight: '1px solid #d1d5db',
            display: 'flex',
            alignItems: 'center',
            color: '#4b5563',
          },
          'input': {
            flex: 1,
            padding: '0.5rem 0.75rem',
            border: 'none',
            outline: 'none',
          }
        }
      })
    })
  ]
}

2. 页面中直接调用即可：

<div class="input-group w-96">
  <span class="input-group-prepend">https://</span>
  <input type="text" placeholder="输入站点地址">
</div>

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