tailwind-color-adder
An automation script used to add all the colors variable from root css to tailwind for easy usage
Use-case
- 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.
Usage
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
Files
app.css
:root{
--varColor:#823761;
--varUnaddedColor:#456780;
}
Before
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
varColor: "var(--varColor)",
},
},
},
plugins: [],
};
After
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
"varColor": "var(--varColor)",
"varUnaddedColor": "var(--varUnaddedColor)"
},
},
},
plugins: [],
};
Issues
Issues and suggestions are welcome. https://github.com/tanishchugh01/tailwindColorAdder/issues