Problem

I’m working on a project using Tailwind CSS and I want to dynamically add responsive classes to my elements based on certain conditions. However, I’m having trouble getting it to work. Here’s what I’m trying to do:

const Component = ({config}: {config?: string}) => {
  return (
    //the config should be something like "col-span-2"
    <div className={`relative w-full h-auto aspect-square col-span-1 sm:${config} bg-gray-200`}>
      Box
    </div>
  )
}

I have tried changing the config to "sm:col-span-2" instead, but it still doesn’t work, the className also shows at my browser. I think it’s something with how Tailwind processes the utility-class. Any idea how to make it work? Thanks in advance 😀