Custom Colors Problems in React JS

[tonyzheng01]

Hi,
I have been trying to add customize the color in my React app, and have run into multiple problems.

Here's some of my code:

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    colors: {
      primary: "var(--color-primary)",
      secondary: "var(--color-secondary)",
    },
    extend: {},
  },
  variants: {},
  plugins: [],
};

// tailwind.css
@tailwind base;

@tailwind components;

@tailwind utilities;

.theme-TCD {
  --color-primary: #411218;
  --color-secondary: #e8982e;
}

1. I originally setup my React app following this tutorial using npm but that would not work. When I follow this tutorial using yarn, some custom colors are applying correctly.

2. Only custom text colors are applying, not bg colors.

3. Custom text color only applies if it's a React element. It doesn't work in a plain HTML tag.
   I.E.

import React from "react";
import Hello from "./hello";

function App() {
  return (
    <div className="theme-TCD">
      <h1 className="text-primary">Hello World!</h1> // This does not work
      <Hello /> // This works
    </div>
  );
}

export default App;

Thank you to anybody who can help enlighten me. :)