Tailwind CSS custom color applying to text but not background in ReactJS

user_13614613 0
Viewed 8054

Okay so my problem is more than just as titled. 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;
tailwind-css reactjs javascript
1 Answers

Try inverting the order of appearance in your tailwind.css file and changing to :

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

@tailwind  base;
@tailwind  components;
@tailwind  utilities;
user_122955020
Related