Tailwind-color-adder NPM

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: [],
};