- In react project, when you add or change the variable colors in your css files, tailwind does not process them as their own variables.
- You cannot use them as "bg-variableColor".
- You can use this script to automatically scan for css variables in your app.css and add all the colors in required format to tailwind.config.js file.
Run npx script in root folder
npx tailwind-color-adder
(npx comes with npm 5.2+ and higher)
Alternatively,
To globally install this package
npm i -g tailwind-color-adder
Then,
Run this script after changing root colors in file and run this file from root of the directory, tailwind config will automatically change
tailwind-color-adder
app.css
:root{
--varColor:#823761;
--varUnaddedColor:#456780;
}
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
varColor: "var(--varColor)",
},
},
},
plugins: [],
};
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
"varColor": "var(--varColor)",
"varUnaddedColor": "var(--varUnaddedColor)"
},
},
},
plugins: [],
};
Issues and suggestions are welcome. https://github.com/tanishchugh01/tailwindColorAdder/issues