title: Cannot add dynamic classes using classNames in NextJS
body: <p>Here is my code using Tailwind and classnames library:</p>
  <pre><code>import React from 'react';
  import cn from 'classnames';
  
  function Navbar({
    left,
    title,
    right,
    bgColor = 'primary-800',
    textColor,
    sticky = true,
  }) {
    return (
      &lt;div
        className={cn({
          [`bg-${bgColor}`]: true,
          [`text-${textColor}`]: true,
          ['sticky top-0']: sticky,
          ['z-10 flex h-11 items-center px-4 py-5 font-semibold shadow']: true,
        })}
      &gt;
        &lt;div className=&quot;h-5 w-5 flex-none&quot;&gt;{left}&lt;/div&gt;
        &lt;div className=&quot;grow text-center&quot;&gt;
          &lt;span&gt;{title}&lt;/span&gt;
        &lt;/div&gt;
        &lt;div className=&quot;h-5 w-5 flex-none&quot;&gt; {right}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Navbar;
  </code></pre>
  <p>When I deploy the code, the generated CSS file does not contain bg color property.</p>
  <pre><code>class=&quot;bg-primary-800 text-white z-10 flex h-11 items-center  px-4 py-5 font-semibold shadow sticky top-0&quot;
  </code></pre>
  <p>There is no problem with the class.</p>
  <p>Is it because tailwind is purging the unused classnames?</p>