使用Tailwind工具类时React map遍历渲染首个元素样式异常如何解决？

根因定位 #

• Tailwind 动态类名拼接规则不兼容：Tailwind 是编译时生成CSS的工具，只会将代码中完整静态书写的类名打包到最终样式文件中。你使用bg-${bgColor}、border-${boarder}这类字符串拼接生成的类名不会被Tailwind识别，会出现样式缺失，最终导致第一个元素渲染异常。
• 多余布局嵌套破坏flex规则：你的Button组件外层额外套了一层<div className="block">，外层flex容器的space-x-1、space-y-1是给直接子元素添加间距，这个多余的block层级会导致间距计算逻辑异常，动态渲染时第一个元素的排列规则和其他元素不一致。
• 无关代码问题：属性名boarder是拼写错误（正确为border），selcted ?? selcted的空值判断逻辑完全无效，这两个问题虽不直接导致布局异常，但会引发其他样式错误。

修复步骤 #

1. 重构Button组件，移除动态类名拼接 #

提前把按钮样式映射为静态完整类名，确保Tailwind可以扫描识别：

export const Button = ({
  isSelected,
  buttonTitle,
  otherClasses,
}) => {
  // 所有类名均为静态完整写法，可被Tailwind正常编译
  const baseClasses = "bg-transparent text-gray-700 border border-blue-500 hover:bg-blue-500 hover:text-white hover:border-blue-500 text-xs rounded-full px-4"
  const selectedClasses = "lg:focus:bg-blue-500 lg:focus:text-white"

  return (
    <button
      className={`${baseClasses} ${isSelected ? selectedClasses : ''} ${otherClasses}`}
    >
      {buttonTitle}
    </button>
  );
};

2. 调整父容器布局，优化间距写法 #

用gap代替space-x-1 space-y-1，避免嵌套元素导致的间距计算异常：

<div className="flex flex-wrap justify-center items-center gap-1">
  {domains.map((domain, index) => {
    return (
      <Button
        key={index}
        isSelected={false} // 按实际业务逻辑传入选中状态
        buttonTitle={domain}
      />
    );
  })}
</div>

额外说明 #

手动渲染多个Button时样式正常，是因为手动书写的类名会被Tailwind扫描到，而动态拼接生成的类名不会被识别，才会出现动态渲染和手动渲染表现不一致的问题。

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