Tailwind Interpolation error in node_modules

I do not think that tailwindcss has url function. If you figure out that part, interpolation does not work well with tailwindcss. using bg-${item} would not work. It would not throw error but tailwind would not know what ${item} is so you would never had that class name.

I had similar issue:

 const TYPES = {
   success: "green",
   warning: "yellow",
   danger: "red",
 };

I was passing type prop to the component

const messageType=TYPES[type]

then using it like this:

  `bg-${messageType}-100`  

To solve this I created:

const BG_CLASSES = {
  success: "bg-green-100",
  warning: "bg-yellow-100",
  danger: "bg-red-100",
};

and pass:

   <div className={`${BG_CLASSES[type]}`}>