title: Template literal not working correctly with Tailwind CSS
body: <p>I am passing in a Hex Colour into a prop and attempting to set the background of an element with it. Here is my code:</p>
  <pre><code> let cardColourRGB: string;
   if (cardColour) {
     cardColourRGB = &quot;[&quot; + cardColour + &quot;]&quot;;
     console.log(cardColourRGB);
   } else {
     cardColourRGB = &quot;white/50&quot;
   }
  </code></pre>
  <p>In the <code>return</code> function:</p>
  <pre><code> &lt;div className={`bg-${cardColourRGB}`}&gt;&lt;/div&gt;
  </code></pre>
  <p>Passing in some colours work, but others don't. For example, passing in #AAA32E as the prop does not set the colour, but setting the colour directly works:</p>
  <pre><code>&lt;div className={`bg-[#AAA32E]`}&gt;&lt;/div&gt;
  </code></pre>
  <p>Why could this be?</p>