Next.js Discord

Discord Forum

custom background color tailwind

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

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...
Just use the style prop for this