why i cant able to set background color in tailwindcss?

Question

I'm trying to set css dynamicly so where is the code where im setting code

export default function ThingCard({
    title,
    background = "#2B5CEA",
    icon,
    href,
}: ThingCardProps) {
    return (
        <Link
            href={href}
            rel="noreferrer"
            target="_blank"
            className={`hover:bg-[${background}] p-2 rounded-xl text-gray-400 bg-gray-800 hover:shadow-xl transition-all flex items-center`}
        >
            <span
                className="inline-flex items-center justify-center w-8 h-8 md:w-11 md:h-11 bg-gray-800 rounded-lg mr-3 shrink-0"
                style={{ backgroundColor: background }}
            >
                <span className="relative w-4 h-4 md:w-6 md:h-6">
                    <Image
                        src={icon}
                        fill
                        alt={title}
                    />
                </span>
            </span>

            <h4 className="text-sm md:text-base lg:text-lg font-bold text-gray-200 truncate">
                {title}
            </h4>
        </Link>
    );
}

and sending props like this

<ThingCard
            title="VS Code"
            background="#0065A9"
            icon="/svg/stacks/vscode.svg"
            href="https://code.visualstudio.com/"
          />
          <ThingCard
            title="Github"
            background="#070A52"
            icon="/svg/stacks/github.svg"
            href="https://hyper.is/"
          />

the problem is like background color is working fine in vscode thingCard but not working in github thingcard why??

Answer 1

The issue might be with the way you're passing the background prop to the ThingCard component, you're passing background as a string with a hash symbol in front, like background="#0065A9".

export default function ThingCard({
  title,
  background = "2B5CEA",
  icon,
  href,
}: ThingCardProps) {
  return (
    <Link
      href={href}
      rel="noreferrer"
      target="_blank"
      className="hover:bg-gray-700 p-2 rounded-xl text-gray-400 bg-gray-800 hover:shadow-xl transition-all flex items-center"
      style={{ backgroundColor: `#${background}` }}
    >
      <span
        className="inline-flex items-center justify-center w-8 h-8 md:w-11 md:h-11 bg-gray-800 rounded-lg mr-3 shrink-0"
        style={{ backgroundColor: `#${background}` }}
      >
        <span className="relative w-4 h-4 md:w-6 md:h-6">
          <Image src={icon} fill alt={title} />
        </span>
      </span>

      <h4 className="text-sm md:text-base lg:text-lg font-bold text-gray-200 truncate">
        {title}
      </h4>
    </Link>
  );
}

now we're using #${background} to set the backgroundColor property in both the className string and the style object. This ensures that the background prop is used consistently and without any extra characters.