Tailwind CSS 自定义颜色应用于文本而不是 ReactJS 中的背景

Posted 2023-03-07

【中文标题】Tailwind CSS 自定义颜色应用于文本而不是 ReactJS 中的背景

【英文标题】：Tailwind CSS custom color applying to text but not background in ReactJS

【发布时间】：2020-10-06 07:28:41

【问题描述】：

好的，所以我的问题不仅仅是标题。 我一直在尝试在我的 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;

我最初使用 npm 在 this tutorial 之后设置了我的 React 应用程序，但这不起作用。当我使用纱线关注this tutorial 时，一些自定义颜色正在正确应用。

只应用自定义文本颜色，不应用背景颜色。

自定义文本颜色仅适用于 React 元素。它不适用于纯 html 标记。 IE

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;

【参考方案1】：

尝试在 tailwind.css 文件中颠倒出现顺序并更改为：

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


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