React+TailwindCSS：移除图片式按钮组间的空白间隙

使用React渲染包含3个按钮的按钮组时，按钮之间出现空白间隙，相关代码及显示效果如下：

React代码 #

<div className=" mt-2 flex items-center justify-center ">
  <div
    className="mt-1 inline-flex shadow-lg "
    role="group"
  >
      {products.map((product) => { 
           return ( 
           <div key={product.id}>
           <button
              type="button"
              onClick={() => {
                setPName(product.name);
                setPId(product.id)
              }}
              className="prodButton float-left px-6 md:px-8 py-3 text-black text-xs font-pixeloid leading-tight inline-block focus:text-white transition duration-150 ease-in-out"
            >{product.name.toUpperCase()}</button>
            </div>
            )
          })}
  </div>
</div>

CSS代码 #

.prodButton 
{
  background-image: url('/assets/images/Buttons/ProdButton.png');
  background-size: 100% 100%;
}

按钮组显示效果：

无法消除按钮间空白，求解决方案。

• 移除按钮外层的包裹div：每个按钮被独立div包裹会产生默认块级元素间距，直接将按钮作为map的返回元素：

  {products.map((product) => { 
       return ( 
       <button
          key={product.id}
          type="button"
          onClick={() => {
            setPName(product.name);
            setPId(product.id)
          }}
          className="prodButton float-left px-6 md:px-8 py-3 text-black text-xs font-pixeloid leading-tight inline-block focus:text-white transition duration-150 ease-in-out"
        >{product.name.toUpperCase()}</button>
        )
      })}
  

• 给父容器添加无间距类：利用Tailwind的gap-0类强制消除flex容器的子元素间距：

  <div
    className="mt-1 inline-flex shadow-lg gap-0"
    role="group"
  >
  

• 清理按钮冗余布局属性：父容器是flex布局时，按钮不需要float-left和inline-block，移除这些属性避免额外间距：

  className="prodButton px-6 md:px-8 py-3 text-black text-xs font-pixeloid leading-tight focus:text-white transition duration-150 ease-in-out"
  

• 检查背景图是否自带留白：若ProdButton.png本身包含透明边距，需用图片编辑工具裁剪掉多余空白。

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