如何更简洁地动态格式化Tailwind CSS类以实现可复用样式？

核心优化思路 #

用颜色映射对象替代冗长的条件判断，把每种颜色对应的静态类名预先定义好，既符合 Tailwind 对完整类名的要求，又能大幅减少重复代码。

优化后的完整代码 #

import ctl from "@netlify/classnames-template-literals";

// 定义允许的颜色类型，增强类型安全
type BadgeColor = "green" | "red" | "yellow" | "blue" | "indigo" | "purple" | "pink" | "orange" | "gray";

interface BadgeProps {
  color: BadgeColor;
  status: string | boolean;
}

// 颜色映射表：key 是颜色名称，value 是对应的 Tailwind 类名
const colorClassMap: Record<BadgeColor, string> = {
  green: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
  red: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
  yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
  indigo: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
  purple: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
  pink: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
  orange: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
  gray: "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300",
};

const containerStyle = ctl(`
  font-medium mr-2 px-2.5 py-0.5 rounded text-sm
`);

function Badge({ color, status }: BadgeProps) {
  const colorClasses = colorClassMap[color] || "";
  return <span className={ctl(`${colorClasses} ${containerStyle}`)}>{status}</span>;
}

export default Badge;

优化点说明 #

1. 类型安全增强：用 BadgeColor 联合类型限制 color 属性的取值范围，避免传入无效颜色。
2. 消除冗余条件：通过 colorClassMap 直接查找对应颜色的类名，替代原本的多层三元判断，代码更简洁易维护。
3. Tailwind 兼容性：所有类名都是静态字符串，Tailwind JIT 编译器能正常识别并生成对应的样式，解决了动态拼接类名不生效的问题。
4. 样式分离清晰：容器通用样式和颜色专属样式分开定义，逻辑更清晰，后续修改样式也更方便。

额外优化建议 #

如果需要支持更多颜色，只需在 BadgeColor 类型和 colorClassMap 对象中添加对应的条目即可，无需修改组件逻辑，扩展性极强。

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