Multiple Variant Class Acording to Components State

[danapratama456]

Hello everyone 👋
If we have multiple variant of tailwind class, how does tailwind handle it with JIT?

example :

const VARIANT_MAPS= {
  [Variant.GRAY]: "bg-gray-100 text-gray-800",
  [Variant.DANGER]: "bg-red-100 text-red-800",
  [Variant.WARNING]: "bg-orange-100 text-orange-800",
  [Variant.YELLOW]: "bg-yellow-100 text-yellow-800",
  [Variant.SUCCESS]: "bg-green-100 text-green-800",
  [Variant.TEAL]: "bg-teal-100 text-teal-800",
  [Variant.BLUE]: "bg-blue-100 text-blue-800",
  [Variant.INDIGO]: "bg-indigo-100 text-indigo-800",
  [Variant.PURPLE]: "bg-purple-100 text-purple-800",
  [Variant.PINK]: "bg-pink-100 text-pink-800"
};

then we combine those variant in this components according to state

export function Badge(props: Props) {
  const { children, variant } = props;
  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 whitespace-no-wrap`+
        VARIANT_MAPS[variant]
      )}>
      {children}
    </span>
  );
}

can Tailwind's JIT detects class inside VARIANT_MAPS variable?
or can we use other option?