Tailwind CSS colors in Chrome Devtools

I like to prototype designs or experiment with UI right in the browser. For Liftosaur, I use Tailwind CSS to style the app. What I was really missing is the ability to specify the colors from my Tailwind CSS theme in devtools.

Apparently, it's pretty easy to add them though. You probably have a tailwind.config.js file in your project directory (if not, just create it with module.exports = {};). Then, you could use a script like this:

const resolveConfig = require("tailwindcss/resolveConfig");
const tailwindConfig = require("./tailwind.config.js");

const fullConfig = resolveConfig(tailwindConfig);

let output = ":root {\n";
for (const key of Object.keys(fullConfig.theme.colors)) {
  const value = fullConfig.theme.colors[key];
  if (typeof value === "string") {
    output += `  --${key}: ${value};\n`;
  } else {
    for (const colorKey of Object.keys(value)) {
      const colorValue = value[colorKey];
      output += `  --${key}-${colorKey}: ${colorValue};\n`;
    }
  }
}
output += "}\n";

console.log(output);

And run it like:

$ node tw.js > colors.css

It will generate a file with a bunch of CSS variables with colors from your theme. Copy the contents of colors.css to your app's CSS file. And you'll be able to use those in devtools: