Generate a Tailwind v4 theme from a live website
Learn how to turn an observed website into a focused Tailwind v4 theme draft with editable tokens for type, color, spacing, borders, and components.
generate tailwind v4 theme from a live website
You can generate a Tailwind v4 theme from a live website by capturing a representative page, checking repeated design choices, and translating those choices into CSS variables inside an @theme block. The safest result is an editable theme draft based on what is visible, not a claim that you recovered the site's complete or official design system.
The workflow
Capture first. Pick a page that shows the parts your project needs: navigation, headings, body copy, buttons, cards, inputs, imagery, and footer content. Record the viewport and page state. Capture a menu, modal, hover state, dark mode, or other state separately when it affects your work.
Review repeated patterns. Check typography families, weights, sizes, and line heights. Compare color roles, spacing, borders, radii, shadows, gradients, and component states. Repetition matters more than a single sampled value.
Translate by role. Name tokens for how your project will use them: --color-surface, --color-text-muted, --color-border-subtle, and --radius-control. This is easier to adapt than names such as --purple-1 or --sampled-gray.
The examples below show a captured Linear reference and an observed typography summary. Use them to compare hierarchy and font usage, not as proof of Linear's private source tokens.
Captured pages
Linear typography
- Inter
Weight 400
- Inter
Weight 500
Tailwind v4 theme draft
Tailwind v4 lets you define theme values in CSS. Start with a compact set of semantic tokens and replace these illustrative values with details you have checked:
The useful part is the structure: a small set of semantic variables that can generate utilities and remain understandable months later. Do not treat the sample colors or measurements as verified values from the captured website.
What to extract
Extract a font family after checking that it appears consistently and that the weights you need are available to your project. The supplied Linear example identifies Inter at weights 400 and 500, with hierarchy created through size, weight, and muted color. That is an observation from the supplied reference, not a guarantee about every page.
Extract colors as roles, not just swatches. Decide whether each color belongs to the page background, surface, body text, muted copy, border, link, action, status, or decoration. Check contrast in your own implementation.
Extract spacing from multiple components. Compare section padding, card gaps, button padding, navigation spacing, and text rhythm. Apply the same approach to radii and shadows. Repeated treatment is more useful than an isolated visual effect.
Leave out details that are hard to verify or unlikely to be reusable. A one-off illustration gradient, a brief animation, or a pixel sampled from an image should not automatically become a theme token. Add it later if your project genuinely needs it.
Review before adoption
Use a four-column review: observed detail, proposed token, confidence, and decision. The decision can be keep, adapt, or discard. Build a small test page with a heading, paragraph, primary button, secondary button, card, input, and alert. Check narrow and wide layouts, long text, focus states, and contrast.
Keep a note that the file is an inferred theme from an observed website. It can speed up a visual study or new project, but it does not replace official design documentation or source files. If you need a complete product system, inspect multiple pages and states and make your own accessibility and interaction decisions.
Use this in your AI agent
> Inspect the captured website and produce a Tailwind CSS v4 theme draft using an @theme block. Identify repeated typography, color roles, spacing, borders, radii, shadows, and responsive patterns. Return editable CSS variables, a token table with confidence levels, and a review checklist. Use semantic names, separate observed details from adaptations, and never describe inferred values as the website's official internal design system.
Can I use a Tailwind v4 theme draft for a production app?
Yes, as a starting point, provided you review it before making it a production default. Confirm that the fonts and weights are available, replace illustrative values with checked values, and test the theme across the components your app actually uses. A single captured page may not show focus, error, disabled, hover, dark, or responsive states.
Separate visual similarity from product requirements. You may keep the spacing rhythm and type hierarchy while changing the accent color, radius, or contrast levels for your brand and users. Run your normal accessibility checks and document which tokens were observed, which were adapted, and which were created for your product.
What should my AI agent return when it generates the Tailwind theme?
Ask for four things: the CSS theme draft, a token inventory, an evidence and confidence table, and a manual review checklist. The CSS should use semantic names and valid Tailwind v4 structure. The inventory should explain what each token controls. The evidence table should distinguish repeated observations from assumptions. The checklist should cover fonts, contrast, focus states, responsive behavior, content length, and missing interaction states.
You can also ask for a small component preview specification: one page section, one card, two button variants, an input, and a status message. That gives you a concrete way to compare the draft against the reference and decide what belongs in your own system.