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.…