时间戳

首页 > 解决方案 > 为什么我的自定义 Tailwind CSS 实用程序不适用于 React 元素？

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

问题描述

我正在尝试通过以下方式创建多个主题：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”，但这不起作用。

标签： cssreactjstailwind-css

解决方案

你在使用 CRA（创建 React 应用程序）吗？如果是这样，您将不得不进行一些设置。

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

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"
  }
}

资料来源：使用 create-react-app 设置 Tailwind

推荐阅读