title: Dynamic classes with tailwind and clsx
body: <p>I have a tsx component and am using tailwind and clsx for the classes. I am trying to dynamically set the background color and text color. I can't seem to figure out why this code below isn't working.</p>
  <pre><code>export const Badge: FC&lt;IBadge&gt; = ({
    text,
    textColor,
    backgroundColor,
    isHighlihted = false,
  }) =&gt; {
    const badgeClasses = classNames({
      [`bg-[${backgroundColor}] text-[${textColor}]`]: !isHighlihted,
      &quot;bg-aqua text-white&quot;: isHighlihted,
    });
  
    return (
      &lt;div className={`font-bold text-sm p-3 text-center ${badgeClasses}`}&gt;
        &lt;div dangerouslySetInnerHTML={{ __html: text }} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Badge;
  </code></pre>
  <p>When I inspect in the browser I can see the markup looks like this, as I would expect, but the styles are not being applied for the background and text color. Where am I going wrong here?</p>
  <pre><code>&lt;div class=&quot;font-bold text-sm p-3 text-center bg-[#000] text-[#fff]&quot;&gt;
  </code></pre>