我试图通过以下方式创建多个主题: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”，但是没有用。
你在使用CRA（创建反应应用程序）吗？ 如果是这样，您将不得不做一些设置。
首先，您需要安装一些依赖项
yarn add -D tailwindcss autoprefixer postcss-cli
或
npm install --save-dev tailwindcss autoprefixer postcss-cli
之后，您需要创建一个postcs.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设置顺风
