Rebuilding a Tailwind v4 Theme from an Existing Website
A developer tasked with matching a new app to a client's existing site, which lacks Tailwind and a style guide, describes extracting a usable theme from the live page. The approach favors naming colors by role, such as primary, background, text, muted and border, over listing every hex code. Fonts should be checked via the browser's computed styles, with free substitutes chosen for commercial typefaces, and type sizes, weights, line heights and tracking recorded. The resulting values are placed in a Tailwind CSS v4 @theme block, which replaces Tailwind's defaults. The author also built a browser extension, Stylasso, to automate these steps, and notes that it is their own product.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.


Discussion (0)
Log in to join the discussion and vote.
Log in