Tailwind 4 Generate Color Shades Dynamically using chroma-js

tailwind4-css-color-gen.js

import fs from "fs";
import chroma from "chroma-js";

// Define your custom colors
const colors = {
  primary: "#1E40AF", // Blue
  secondary: "#10B981", // Green
  tertiary: "#9333EA", // Purple
  accent: "#F59E0B", // Amber
};

// Function to generate shades for a given base color
function generateShades(baseColor) {
  const scale = chroma
    .scale(["white", baseColor, "black"])
    .domain([0, 0.65, 1])
    .padding([0.2, 0.2])
    .mode("oklch")
    .colors(9); // Generates 9 shades for 100 to 900

  return {
    base: baseColor,
    100: scale[0],
    200: scale[1],
    300: scale[2],
    400: scale[3],
    500: scale[4],
    600: scale[5],
    700: scale[6],
    800: scale[7],
    900: scale[8],
  };
}

// Function to determine text color based on luminance
function getTextColorForBackground(color) {
  const luminance = chroma(color).luminance();
  return luminance > 0.5 ? "black" : "white";
}

// Generate the CSS
let css = '@import "tailwindcss";\n\n';

css += "@theme {\n";

Object.entries(colors).forEach(([name, baseColor]) => {
  const shades = generateShades(baseColor);
  Object.entries(shades).forEach(([key, shade]) => {
    const textColor = getTextColorForBackground(shade);
    css += `  --color-${name}-${key}: ${shade};\n`;
    css += `  --color-${name}-text-${key}: ${textColor};\n`;
  });
});

css += "}\n";

// Write the CSS to a file
fs.writeFileSync("./tailwind-generated.css", css);
console.log("CSS with @theme block and text colors generated successfully!");

Generated output tailwind-generated.css

@import "tailwindcss";

@theme {
  --color-primary-100: #b4c5ea;
  --color-primary-text-100: black;
  --color-primary-200: #99b0e1;
  --color-primary-text-200: white;
  --color-primary-300: #7f9ad8;
  --color-primary-text-300: white;
  --color-primary-400: #6584cf;
  --color-primary-text-400: white;
  --color-primary-500: #4c6fc5;
  --color-primary-text-500: white;
  --color-primary-600: #3458ba;
  --color-primary-text-600: white;
  --color-primary-700: #1e40af;
  --color-primary-text-700: white;
  --color-primary-800: #0b2191;
  --color-primary-text-800: white;
  --color-primary-900: #050074;
  --color-primary-text-900: white;
  --color-primary-base: #1E40AF;
  --color-primary-text-base: white;
  --color-secondary-100: #c6ead7;
  --color-secondary-text-100: black;
  --color-secondary-200: #b0e2c8;
  --color-secondary-text-200: black;
  --color-secondary-300: #99daba;
  --color-secondary-text-300: black;
  --color-secondary-400: #81d2ac;
  --color-secondary-text-400: black;
  --color-secondary-500: #67ca9d;
  --color-secondary-text-500: white;
  --color-secondary-600: #48c18f;
  --color-secondary-text-600: white;
  --color-secondary-700: #10b981;
  --color-secondary-text-700: white;
  --color-secondary-800: #008a56;
  --color-secondary-text-800: white;
  --color-secondary-900: #005d2d;
  --color-secondary-text-900: white;
  --color-secondary-base: #10B981;
  --color-secondary-text-base: white;
  --color-tertiary-100: #dcc7fd;
  --color-tertiary-text-100: black;
  --color-tertiary-200: #cfb1fb;
  --color-tertiary-text-200: black;
  --color-tertiary-300: #c29cf9;
  --color-tertiary-text-300: white;
  --color-tertiary-400: #b685f6;
  --color-tertiary-text-400: white;
  --color-tertiary-500: #aa6ef3;
  --color-tertiary-text-500: white;
  --color-tertiary-600: #9e54ef;
  --color-tertiary-text-600: white;
  --color-tertiary-700: #9333ea;
  --color-tertiary-text-700: white;
  --color-tertiary-800: #7000c1;
  --color-tertiary-text-800: white;
  --color-tertiary-900: #500098;
  --color-tertiary-text-900: white;
  --color-tertiary-base: #9333EA;
  --color-tertiary-text-base: white;
  --color-accent-100: #fee2c4;
  --color-accent-text-100: black;
  --color-accent-200: #fdd7ad;
  --color-accent-text-200: black;
  --color-accent-300: #fccc96;
  --color-accent-text-300: black;
  --color-accent-400: #fbc17d;
  --color-accent-text-400: black;
  --color-accent-500: #f9b663;
  --color-accent-text-500: black;
  --color-accent-600: #f7aa44;
  --color-accent-text-600: white;
  --color-accent-700: #f59e0b;
  --color-accent-text-700: white;
  --color-accent-800: #bd6a00;
  --color-accent-text-800: white;
  --color-accent-900: #883800;
  --color-accent-text-900: white;
  --color-accent-base: #F59E0B;
  --color-accent-text-base: white;
}

Then import into entry css file for tailwindcss 4

main.css

@import "tailwindcss";

@theme {
  --font-display: "Poppins", sans-serif;
  
  --breakpoint-3xl: 1920px;
  
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}
@import "path/to/tailwind-generated.css";