Export Color Tokens for Tailwind CSS v3 and v4

Choose an export that matches the Tailwind version in your application. Color Match offers separate v3 and v4 outputs because their configuration surfaces differ. The examples here use one brand color and one text partner, so you can verify a small change before importing an entire scale.

Tailwind v3: extend theme colors

// tailwind.config.cjs
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: "#1D4ED8" },
        "on-brand": "#FFFFFF"
      }
    }
  }
};

The v3 extend object adds these keys while retaining the existing palette. Replacing theme.colors has different consequences for utilities that rely on default colors. If your project uses ES modules, use its supported configuration extension or export syntax consistently.

Tailwind v4: declare theme variables

@import "tailwindcss";
@theme {
  --color-brand: #1D4ED8;
  --color-on-brand: #FFFFFF;
}

In a v4 project these theme variables expose matching color utilities. Keep the same explicit semantic distinction between the surface and the text; the variable name itself supplies no readability guarantee.

Render a component before broad adoption

<button class="bg-brand text-on-brand px-4 py-2 rounded-lg">
  Save changes
</button>

Inspect computed styles after compiling your own project. Test focus visibility and each hover or disabled treatment you add. A lighter tint with the same white label can fail even when this base color passes. The generated tint/shade labels are two scales, not automatically the conventional 50-950 brand scale.

Keep imports reviewable

Open a blue-and-white palette in Studio and choose the matching Tailwind export. Commit the generated values with the component example and its paired test so a later color change has a clear review target.