Tailwind v4 Export

01 — The new way

CSS-first configuration

Tailwind v4 killed the JavaScript config. Colors live in CSS now. Paletter exports the exact format you need:

@theme {
  --color-background: #F5DBC1;
  --color-ink: #583819;
  --color-accent: #FC6911;
  --color-support: #9A7658;
  --color-neutral: #D9B89D;
}

Paste it into your app.css. Every utility class just works. No plugin. No config merge. No build error.

02 — v4 vs v3

The old way is dead

Old way: tailwind.config.js with a nested colors object. JavaScript. CommonJS or ESM. Merge conflicts with every plugin. Restart the dev server when you change a color.

New way: @theme in your CSS file. No JavaScript config. No build complexity. Hot reload picks it up instantly. Just CSS doing CSS things.

Paletter exports v4 format by default. Because that is what Tailwind is now.

03 — Semantic classes

Classes that describe intent

bg-background. text-ink. border-accent. Classes that describe what the color does, not what it looks like.

When you change your palette, just swap the @theme block. Every class updates. Every component. Every page. No find-and-replace across 200 files.

Before

bg-amber-50, text-amber-900, border-orange-500 — hardcoded to a specific palette. Rebrand means touching every file.

After

bg-background, text-ink, border-accent — semantic roles. Swap the @theme block, everything updates.

04 — One click

Sixty seconds from palette to production

Generate a palette. Open the Export tab. Click Copy Tailwind v4. Paste into app.css. Done.

That is the entire workflow. No npm install. No plugin configuration. No restart. Sixty seconds from palette to production.

Want the full system? Export to CSS, SCSS, design tokens, and 7 more formats from the same palette.

Export for Tailwind

Generate a palette. Copy the @theme block. Ship it.

Start generating