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

Question

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

这是我的一些代码：

// 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. 我最初使用 npm 按照本教程设置我的 React 应用程序，但这不起作用。当我使用纱线按照本教程进行操作时，一些自定义颜色应用正确。

2. 仅应用自定义文本颜色，而不应用 bg 颜色。

3. 自定义文本颜色仅适用于 React 元素的情况。它在纯 HTML 标签中不起作用。 即

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;

Answer 1

尝试反转顺风.css文件中的出现顺序并更改为：

:root {
--color-primary: #411218;
--color-secondary: #e8982e;
}
@tailwind  base;
@tailwind  components;
@tailwind  utilities;