@palettebro/tailwind

Tailwind CSS 4 plugin that injects @palettebro/generator palettes as theme color utilities.

Requires tailwindcss >= 4 and Node.js >= 22.

Installation

npm install @palettebro/tailwind @palettebro/generator tailwindcss
# or
pnpm add @palettebro/tailwind @palettebro/generator tailwindcss

Usage

Add the plugin in your CSS entry file (same pattern as palettebro.com):

@import "tailwindcss";

@plugin '@palettebro/tailwind' {
  primary: #412f9c;
  reverseLightDarkShades: true;
}

Optional plugin options mirror generator theme settings: secondary, accent, variant, preset, reverse, contrast, colorShadesPreset, and frameworkCompatibility.

Utility classes

Semantic tokens become Tailwind utilities:

<div className="bg-surface-container text-on-surface">
  ...
</div>

Or reference CSS variables directly:

<div className="bg-(--color-surface-container) text-(--color-on-surface)">
  ...
</div>

Related

• @palettebro/generator — palette generation API
• Palettebro app — interactive generator and contrast tools

License

MIT