Turn any website's colors, fonts and spacing into a Tailwind v4 theme

October 22, 2026

3 min readMIT licensed · no dependencies

Starting a Tailwind project in the same visual system as a reference site usually means eyeballing hex codes, guessing which gray is the real background, and hand-typing a type scale. One command does this from measurements instead:

npx enrichr-cli tokens stripe.com -f tailwind

It opens the page in your own Chrome or Edge, reads what actually rendered, and prints a Tailwind v4 @theme block — the colors ranked by how much of the page each one covers, the real font names and weights, the type scale, spacing and radii. Nothing is sent anywhere; it's free, MIT licensed, and has no dependencies.

What the output looks like

Trimmed output for linear.app, measured 22 October 2026. Token names describe rank or size (--color-palette-3, --text-xl), never what the designer meant — a site's own CSS variable names come through separately with --site-vars.

@theme {
  --color-background: #fbfbfa;
  --color-text: #08090a;
  --color-accent: #5e6ad2;
  --color-palette-1: #fbfbfa;
  --color-palette-2: #08090a;
  --color-palette-3: #5e6ad2;

  --font-heading: "Inter Variable", sans-serif;
  --font-body: "Inter Variable", sans-serif;
  --font-code: "Berkeley Mono", monospace;

  --text-sm: 13px;
  --text-base: 15px;
  --text-xl: 24px;
  --text-2xl: 48px;

  --radius-md: 8px;
  --spacing-4: 16px;
}

Why not just copy the hex codes by eye?

A page's CSS never labels a color as "the background" or "the accent" — you have to infer that from how much of the page each one covers, which is slow and easy to get backwards on a page with a busy palette. The CLI measures coverage directly: a color counts by the area it actually occupies, so --color-palette-1 really is the color that dominates the page, not just the first one you happened to copy from DevTools.

Why this fits Tailwind v4 specifically

Tailwind v3 read a tailwind.config.js file; v4's own direction is CSS-first — you declare colors, fonts, spacing and the rest with @theme directly in a stylesheet, as CSS custom properties, and Tailwind generates the matching utility classes from them. That's exactly the shape this command writes, so the output pastes straight into a v4 project's CSS with nothing to convert. Older v3 projects can still use the values; they just go in tailwind.config.js's theme.extend instead of a @theme block.

Fonts and the type scale, in the same pass

The same command reports which font sets headings, body and code text, with the real weights that loaded, and the full type scale — each size, line height and weight, ranked by how much of the page's text uses it. That's what the --font-heading, --text-sm through --text-2xl lines above come from.

Other formats from the same command

Full command reference: the Enrichr CLI page.

What it doesn't convert

This is the design system, not the page. It does not touch HTML, layout, components or interactivity — it's the fast way to start a Tailwind project that already looks visually consistent with a reference site, not a one-command site clone. It also can't see what ran before the page finished loading (GSAP timings, WebGL shaders) — those need a full Enrichr capture, which hooks in earlier.

FAQ