Function Signature

js

generateTailwindConfig(baseHex: string, options?: {
  name?: string,
  baseStop?: number,
  stops?: Record<string | number, number | null>,
  chromaFactor?: number
}): object

Parameters

baseHex (string): Base HEX color used to generate the palette.
name (string, optional): Color family name. Defaults to "primary".
baseStop, stops, chromaFactor: Passed through to generateTailwindPalette.

Return Value

A Tailwind config fragment under theme.extend.colors.

js

generateTailwindConfig("#ff6600", { name: "brand" });
// {
//   theme: {
//     extend: {
//       colors: {
//         brand: { 50: "...", 500: "#ff6600", 950: "..." }
//       }
//     }
//   }
// }

Examples

js

import { generateTailwindConfig } from "@readytools/colors";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  ...generateTailwindConfig("#ff6600", { name: "brand" })
};

Usage Notes

Useful for quickly turning brand colors into Tailwind-ready theme colors.
For multiple brands, call generateTailwindPalette and compose theme.extend.colors manually.
The returned object is intentionally small and serializable.