为什么我的自定义 Tailwind CSS 实用程序不适用于 React 元素？

Question

I'm trying to create multiple themes by following this: https://github.com/adamwathan/theming-tailwind-demo

My code:

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

// tailwind.css
@tailwind base;

@tailwind components;

@tailwind utilities;

.theme-TCD {
  --color-bg-primary: #411218;

  --color-text-primary: #e8982e;
}

// My HTML
<div className="theme-TCD">
  <div className="bg-primary">
    <Banner />
  </div>
</div>

I have tried "color-bg-primary" and "backgroundColor-primary" in place of "bg-primary" but that does not work.

Answer 1

Are you using CRA(Create React App)? If so, you'll have to do some setup.

First, you'll need to install some dependencies

yarn add -D tailwindcss autoprefixer postcss-cli

or

npm install --save-dev tailwindcss autoprefixer postcss-cli

After you'll need to create a postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Lastly, you'll need to add some scripts to compile the styles

{
  //...
  "scripts": {
    //... place these after the four scripts created by CRA
    "build:styles": "postcss src/tailwind.css -o src/styles.css", 
    "prebuild": "yarn build:styles",
    "prestart": "yarn build:styles"
  }
}

or

{
  //...
  "scripts": {
    //... place these after the four scripts created by CRA
    "build:styles": "postcss src/tailwind.css -o src/styles.css",
    "prebuild": "npm run build:styles",
    "prestart": "npm run build:styles"
  }
}

Source: Setting up Tailwind With create-react-app