Попутный ветер 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. Первоначально я установил свое приложение React, следуя этому руководству , используя npm, но это не сработает. Когда я следую этому руководству , используя пряжу, некоторые пользовательские цвета применяются правильно.

2. Применяются только пользовательские цвета текста, а не цвета bg.

3. Пользовательский цвет текста применяется, только если это элемент 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;

Answer 1

Попробуйте инвертировать порядок появления в файле попутный ветер. css и измените его на:

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

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