Javascript Tailwind CSS自定义颜色应用于文本，但不应用于ReactJS中的背景

好吧，我的问题不仅仅是标题。 我一直在尝试在我的React应用程序中添加自定义颜色，但遇到了多个问题

以下是我的一些代码：

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

我最初使用npm设置我的React应用程序，但这不起作用。当我使用纱线时，一些定制的颜色应用正确

仅应用自定义文本颜色，不应用bg颜色

自定义文本颜色仅适用于React元素。它在普通HTML标记中不起作用。 即

从“React”导入React；
从“/Hello”导入Hello；
函数App（）{
返回(
你好，世界！//这不起作用
//这很有效
);
}
导出默认应用程序；

尝试反转tailwind.css文件中的显示顺序，并更改为：

:root {
  --color-primary: #411218;
  --color-secondary: #e8982e;
}

@tailwind  base;
@tailwind  components;
@tailwind  utilities;

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;

:root {
  --color-primary: #411218;
  --color-secondary: #e8982e;
}

@tailwind  base;
@tailwind  components;
@tailwind  utilities;