Hey, I'm having a small issue with tailwind, it may be a bug or it may be something I'm doing wrong, I'm really not sure.
Basically: I have a login button that has a hover effect element that surrounds it, I'm taking in some arguments for the HoverEffect like the children, if it should be small, if it's a circle, and the tailwind color and saturation (eg sky & 500), this works, however the styles don't get applied correctly if I've never used the color before, like I was testing the color insertion with red and saturation 400, the hover effect works but not immediatley when putting the literal into the className like so:

  colorNameSaturation = `bg-${color}-${saturation}`;

  console.log(colorNameSaturation);

  return (
    <div
      className={`${paddingClasses} hover:${colorNameSaturation} rounded-full transition-colors duration-200 cursor-pointer`}
    >
      {children}
    </div>
  );
//The colorNameSaturation value is correct and works if I have before "loaded" the color by hardcoding it into hover:bg-sky-400, but if I haven't hard coded it in before no color is showing even if the colorNameSaturation is a valid Tailwind color (I know it's valid because the console.logged output works if I paste it directly into the hover property instead of the template literal), is there a way I can import all these colors so they are defined and correctly referenced or how can I go about fixing this?