Building a Tailwind color palette

Tailwind 4 reads theme colors from CSS. The @palettebro/tailwind plugin maps a Palettebro palette onto those theme keys so you can use utilities like bg-surface-container instead of raw hex in every class.

1. Generate the palette

• Pick seeds and a variant in the color palette generator.
• Check the scale on Color Shades.
• Confirm text pairs in the WCAG contrast checker before you lock tokens.

2. Register the plugin

Install @palettebro/tailwind and @palettebro/generator (Tailwind 4+, Node 22+). In your CSS entry:

@import "tailwindcss";

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

Optional fields match the generator: secondary, accent, variant, preset, and the same contrast / shade flags you set in the app.

3. Use semantic classes

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

Prefer those names in components. If the brand hue changes, you change the plugin options — not every bg-* class.