Screenshot to Tailwind v4 theme: exact colors, fonts, and spacing

Tailwind v4 moved configuration into CSS: one @theme block defines your tokens, and every utility follows it. Get that block right and the whole UI snaps to the design.

How Tailwind v4 themes work

Inside @theme, variables create utilities: --color-ink gives you text-ink and bg-ink, --text-display (with --text-display--line-height and friends) gives you a complete text-display style, --radius-pill gives you rounded-pill. Paste it after @import "tailwindcss"; in your main CSS file.

Reading the values off a screenshot

Colors: sample the real pixels and name them by role (ink, muted, surface), not by look (“dark blue”).
Type: size, weight, line height, and tracking for each style; uppercase labels usually carry extra letter spacing.
Spacing: find the base unit (often 4 or 8 px) and the steps actually used.

The fast way

Recast reads the screenshot and exports the theme for you, alongside the prompt your builder needs. Here’s the real Tailwind v4 export for a landing-page hero: paste it, then build with text-headline, text-ink, and the rest.

theme.css

/* Vectrus misty mountain hero: Tailwind v4 theme from Recast. Paste after @import "tailwindcss"; */
@theme {
  --color-ink: #14233A;
  --color-ink-muted: #5B6676;
  --color-line: #14233A;
  --color-sky: #E6EAEF;
  --color-mist: #F2F4F7;
  --color-rock: #7C8799;
  --font-heading: "Inter Tight", Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: "Inter Tight", Inter, 'Helvetica Neue', Arial, sans-serif;
  --text-nav-link: 0.75rem;
  --text-nav-link--line-height: 1;
  --text-nav-link--letter-spacing: 0.12em;
  --text-nav-link--font-weight: 400;
  --text-headline: 4.75rem;
  --text-headline--line-height: 1.06;
  --text-headline--letter-spacing: -0.01em;
  --text-headline--font-weight: 400;
  --text-tagline: 0.875rem;
  --text-tagline--line-height: 1;
  --text-tagline--letter-spacing: 0.42em;
  --text-tagline--font-weight: 400;
  --text-tagline-mobile: 0.688rem;
  --text-tagline-mobile--line-height: 1;
  --text-tagline-mobile--letter-spacing: 0.3em;
  --text-tagline-mobile--font-weight: 400;
  --radius-button-circle: 624.938rem;
  --radius-news-dot: 624.938rem;
  --spacing: 0.25rem;
  --container-page: 80rem;

Real Recast export: a Tailwind v4 theme written from one screenshot. See the design and the full spec.

Common questions

Can I generate a Tailwind theme from an image?

Yes. Recast reads a screenshot (or video) and exports a Tailwind v4 @theme block with the colors, fonts, type scale, radii, and spacing it uses.

Where does the @theme block go?

In your main CSS file, after @import "tailwindcss";. Every variable becomes utilities, like --color-ink → text-ink and bg-ink.

Does it work with Tailwind v3?

The export targets v4’s @theme. For v3, copy the same values into theme.extend in tailwind.config, or use the CSS variables export.

More guides

Try it on your own design.

Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.