title: Dynamically build classnames in TailwindCss
body: <p>I am currently building a component library for my next project with TailwindCss, I just ran into a small issue when working on the Button component.</p>
  <p>I'm passing in a prop like <code>'primary'</code> or <code>'secondary'</code> that matches a color I've specified in the <code>tailwind.config.js</code> then I want to assign that to the button component using <code>Template literals</code> like so: <code>bg-${color}-500</code></p>
  <pre><code>&lt;button
      className={`
      w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
      bg-${color}-500 `}
      onClick={onClick}
      type=&quot;button&quot;
      tabIndex={0}
    &gt;
      {children}
  &lt;/button&gt;
  </code></pre>
  <p>The class name comes through in the browser just fine, it shows <code>bg-primary-500</code> in the DOM, but not in the applied styles tab.</p>
  <p><a href="https://i.stack.imgur.com/Bwcq3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Bwcq3.png" alt="enter image description here" /></a></p>
  <p>The theming is configured like so:</p>
  <pre><code>  theme: {
      extend: {
        colors: {
          primary: {
            500: '#B76B3F',
          },
          secondary: {
            500: '#344055',
          },
        },
      },
    },
  </code></pre>
  <p>But it doesn't apply any styling. if I just add <code>bg-primary-500</code> manually it works fine.</p>
  <p>I'm honestly just wondering if this is because of the JIT compiler not picking dynamic classnames up or if I'm doing something wrong (or this is just NOT the way to work with tailWind).</p>
  <p>Any help is welcome, thanks in advance!</p>