Live token tweaking, in zfb + Tailwind v4

Every visible element on this page is driven by a --zfbtailwindexample-* CSS custom property, consumed via Tailwind v4 utility classes. Open the panel from the browser console and drag any slider — the change applies before the next paint.

Console API: window.zfbTailwindExample.toggleDesignPanel(). Storage prefix: zfb-tailwind-example-tokens.

Cards (spacing + radius + surface)

Card A. Padding driven by p-spacing-md (→ --zfbtailwindexample-spacing-md), corners by rounded-md (→ --zfbtailwindexample-radius), background by bg-surface.
Card B. Stack gap driven by gap-spacing-lg; outline by border-muted.

Buttons (accent / primary)

Palette swatches

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Each swatch reads --zfbtailwindexample-palette-{n}. The cluster's paletteCssVarTemplate is the only thing that decides this name — change it in config/default-cluster.ts and the apply pipeline writes a different variable on the next palette tweak.

Typography scale

Heading H2 — text-h2

Heading H3 — text-h3

Heading H4 — text-h4

Body text — text-body leading-relaxed

Small text — text-small text-muted

Micro text — text-micro text-muted