title: Why is my custom Tailwind CSS utility not applying to React elements?
body: <p>I'm trying to create multiple themes by following this: <a href="https://github.com/adamwathan/theming-tailwind-demo" rel="nofollow noreferrer">https://github.com/adamwathan/theming-tailwind-demo</a></p>
  
  <p>My code:</p>
  
  <pre><code>// tailwind.config.js
  module.exports = {
    purge: [],
    theme: {
      backgroundColor: {
        primary: "var(--color-bg-primary)",
      },
      textColor: {
        primary: "var(--color-text-primary)",
      },
      extend: {},
    },
    variants: {},
    plugins: [],
  };
  
  </code></pre>
  
  <pre><code>// tailwind.css
  @tailwind base;
  
  @tailwind components;
  
  @tailwind utilities;
  
  .theme-TCD {
    --color-bg-primary: #411218;
  
    --color-text-primary: #e8982e;
  }
  </code></pre>
  
  <pre><code>// My HTML
  &lt;div className="theme-TCD"&gt;
    &lt;div className="bg-primary"&gt;
      &lt;Banner /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried "color-bg-primary" and "backgroundColor-primary" in place of "bg-primary" but that does not work.</p>