Tailwind CSS colors in Chrome Devtools

Tailwind colors in 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";


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: