I don't get my issue with custom bg color code with tailwind. If i hard-type bg-[#a040a0] in my classname it's gonna work but not if i'm retrieving it from a variable.. So impossible to customize my badges individually

const typeColorMapping = {
  normal: {
    bgColor: "#a8a878",
    borderTopColor: "#b8b8b8",
    borderBottomColor: "#989898",
  },
  fire: {
    bgColor: "#f08030",
    borderTopColor: "#f89040",
    borderBottomColor: "#d06030",
  }
  ...
};

interface TypeBadgeProps {
  type: string;
}

const TypeBadge = ({ type }: TypeBadgeProps) => {
  const typeInfo = typeColorMapping[type as keyof typeof typeColorMapping];

  if (!typeInfo) {
    return null;
  }

  const { bgColor, borderTopColor, borderBottomColor } = typeInfo;

  return (
    <span className={`py-1 px-2 rounded-full bg-[${bgColor}]`}>{type}</span>
  );
};

i'm working on Next fyi