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.
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"
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments