Next.js Discord

Discord Forum

custom background color tailwind

Unanswered
Mucuchies posted this in #help-forum
Open in Discord
Avatar
MucuchiesOP
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

3 Replies

Avatar
MucuchiesOP
i've also tried to add instead the custom colors in my tailwind config and use it like this instead

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


it doesn't work either.. It's working if I hard type bg-normal...
Avatar
joulev & fuma pray for Schneider
Just use the style prop for this