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

Question

我正在尝试通过以下方式创建多个主题：https://github.com/adamwathan/theming-tailwind-demo

我的代码：

// 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>

我已经尝试用 "color-bg-primary" 和 "backgroundColor-primary" 代替 "bg-primary" 但这不起作用。

Answer 1

你在使用 CRA（Create React App）吗？如果是这样，您将需要进行一些设置。

首先，您需要安装一些依赖项

yarn add -D tailwindcss autoprefixer postcss-cli

或

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

之后您需要创建 postcss.config.js

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

最后，您需要添加一些脚本来编译样式

{
  //...
  "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"
  }
}

或

{
  //...
  "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"
  }
}

来源：Setting up Tailwind With create-react-app

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

Why is my custom Tailwind CSS utility not applying to React elements?

css

reactjs

tailwind-css