A client sends a link: "make the new app feel like our site". The site isn't built with Tailwind, the original designer is gone, and there's no style guide. You need a theme.

Here is how I go from a live page to a Tailwind CSS v4 @theme block, first by hand, then the shortcut I ended up building.

1. Find the colors and give them jobs

A flat list of every hex code on the page is easy to get (Chrome DevTools > More tools > CSS Overview) and not very useful. What you want is roles:

  • primary: the fill of the main buttons. Inspect the hero CTA.
  • background and surface: the page, and the cards or panels on it.
  • text and muted: body copy and captions. Check the contrast while you're there; DevTools shows it in the color picker.
  • border: whatever the dividers and input outlines use.

Naming by role is what lets you write bg-primary and text-muted later instead of bg-[#1d4ed8] everywhere.

2. Find the fonts that actually render

The font-family declaration is a wish list. To see what the browser drew, inspect a heading, open Computed, and scroll to Rendered Fonts. Do it for a heading, body text, a button and any code. If a font is commercial, pick a free stand-in now (Google Fonts has a close match for most).

3. Write down the type scale with its details

For each heading level and body size, note size, weight, line height and letter spacing. Tight tracking on big headlines is a big part of how a site feels, and it's the first thing that gets lost.

4. Put it in @theme

Tailwind v4 reads theme variables from CSS, so there's no config file. Order matters: the font @import has to come first, then Tailwind, then the theme.

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;800&display=swap"); @import "tailwindcss"; @theme { --color-primary: #1d4ed8; --color-accent: #65a30d; --color-background: #ffffff; --color-text: #0f172a; --color-muted: #64748b; --color-border: #e2e8f0; --font-sans: Manrope, ui-sans-serif, system-ui, sans-serif; --text-6xl: 3.75rem; --text-6xl--line-height: 1.02; --text-6xl--letter-spacing: -2.7px; --text-6xl--font-weight: 800; --radius-md: 6px; }

Two things worth knowing:

  • --text-6xl--line-height, --letter-spacing and --font-weight ride along with the size, so text-6xl alone gives you the full headline style.
  • Reusing Tailwind's names (text-6xl, radius-md) replaces the defaults. That's usually what you want for sizes; for colors, role names avoid clobbering blue-700.

The shortcut

Doing this by hand takes me 20 to 30 minutes per site, and I kept doing it, so I made a browser extension, Stylasso, that does steps 1 to 4 from the tab you're on. It picks roles from where colors are painted (button fills and the logo for primary, the most used body color for text), reads the rendered fonts and the type scale, and exports a @theme block like the one above. Those values are its output for a demo site, trimmed to fit this post.

It also writes CSS variables, JSON and a DESIGN.md for AI coding tools; those are free. Since it runs in your own browser, it works on pages you're signed in to and on localhost.

I made it, so I'm biased; if you try it on a site and it gets the primary color wrong, I'd like to know which one.

Written with help from an AI assistant. The steps and the example output were checked against the real tool.