MYDESIGNMDTry free →
Tool

Extract a Tailwind Config from Any Website

Paste any public URL. MYDESIGN.MD extracts the site's color palette, type scale, spacing scale, and border radius values and outputs a Tailwind v4 @theme config — ready to drop into your project. No install. No manual DevTools inspection.

Extract Tailwind config →

What you get

The extracted Tailwind config is a @theme block — the CSS-native configuration format introduced in Tailwind v4. Drop it into your project's main CSS file and the token values become available as Tailwind utilities immediately.

/* tailwind.config.v4.css — drop into your main CSS file */
@theme {
  /* Colors */
  --color-primary:      #0F172A;
  --color-accent:       #6366F1;
  --color-success:      #22c55e;
  --color-warning:      #f59e0b;
  --color-danger:       #ef4444;
  --color-surface:      #F8FAFC;
  --color-border:       #E2E8F0;
  --color-text:         #0F172A;
  --color-text-muted:   #94A3B8;

  /* Typography */
  --font-sans:          'Inter', sans-serif;
  --font-mono:          'Menlo', 'Monaco', monospace;
  --text-xs:            0.75rem;
  --text-sm:            0.875rem;
  --text-base:          1rem;
  --text-lg:            1.125rem;
  --text-xl:            1.5rem;
  --text-2xl:           2rem;
  --text-4xl:           3rem;

  /* Spacing — individual step overrides; alternatively use --spacing: 4px as a base multiplier */
  --spacing-1:          4px;
  --spacing-2:          8px;
  --spacing-4:          16px;
  --spacing-6:          24px;
  --spacing-8:          32px;
  --spacing-10:         40px;
  --spacing-16:         64px;
  --spacing-20:         80px;

  /* Border radius */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-full:        9999px;
}

Once the @theme block is in your CSS, Tailwind generates utility classes from every token — bg-primary, text-accent, rounded-md, p-6, and so on. All other output formats are included in the same extraction run: design-tokens.json, variables.css, and DESIGN.md.

How it works

  1. Paste any public URL — a marketing site, a product, a documentation page. The target site does not need to use Tailwind itself.
  2. Extraction runs automatically — CSS parsing, DOM inspection, and visual analysis identify the underlying design decisions: which colors repeat, what the spacing increments are, how radius varies by component.
  3. Drop the config into your project — paste the @theme block into your main CSS file alongside your @import "tailwindcss"; statement.
/* main.css */
@import "tailwindcss";

@theme {
  --color-primary: #0F172A;
  --color-accent:  #6366F1;
  --font-sans:     'Inter', sans-serif;
  --radius-md:     8px;
  /* ... rest of extracted tokens */
}

Tailwind v4 vs v3 config format

Tailwind v4 replaced the JavaScript config file with CSS-native configuration. If your project is on Tailwind v3, the token values are still usable — they're also exported as CSS custom properties in variables.css, which you can map to a v3 tailwind.config.js manually.

FormatFileUsage
Tailwind v4
tailwind.config.v4.css
Drop @theme block into main CSS file
Tailwind v3
variables.css → manual mapping
Copy token values into theme.extend in tailwind.config.js

What developers use it for

Starting a new project that matches an existing site

Extract the Tailwind config from a live site and drop it into a new project. The new project immediately has the right colors, type scale, and spacing — no manual token documentation required.

Migrating a site to Tailwind v4

Extract the current site's tokens as a @theme block, then refactor component classes to reference your named tokens — bg-primary instead of bg-[#0F172A], rounded-md instead of rounded-[8px]. The extraction gives you the token inventory as a starting point for the migration.

Giving AI coding agents your Tailwind tokens

Paste the extracted tailwind.config.v4.css into your agent context file (CLAUDE.md, AGENTS.md, or equivalent) alongside DESIGN.md. The agent then writes components using your exact token names — bg-primary instead of an arbitrary color, rounded-md instead of a hardcoded radius. See the full setup guide: Design Tokens for AI Coding Agents →

Matching a client's live site in a rebuild

Extract the existing site's token set before a redesign or framework migration. The extraction reflects the live CSS — the ground truth — rather than potentially outdated design files.

Frequently asked questions

How do I generate a Tailwind config from a website?

Paste the URL into MYDESIGN.MD. The extractor identifies the site's color palette, type scale, spacing scale, and border radius values, then outputs a tailwind.config.v4.css file with a @theme block ready to drop into any Tailwind v4 project. No install required.

Does it output Tailwind v4 or v3 config format?

The primary output is Tailwind v4 — a CSS-based @theme block. For Tailwind v3 projects, the same token values are available in variables.css as CSS custom properties, which you can map manually to a tailwind.config.js theme.extend block.

How do I use the extracted config in my project?

Copy the @theme block into your project's main CSS file, alongside your @import "tailwindcss" statement. The token values become Tailwind utilities immediately — bg-primary, text-accent, rounded-md, etc.

Does the target site need to use Tailwind?

No. The extractor reads the underlying CSS values from any site — Tailwind, plain CSS, Bootstrap, or any other framework — and maps them to the Tailwind v4 config format. The output is always valid Tailwind config regardless of how the source site was built.

What is the difference between Tailwind v4 and v3 config?

Tailwind v3 uses a JavaScript config file (tailwind.config.js) where you extend the theme object. Tailwind v4 uses CSS-native configuration: a @theme block in a .css file where tokens are defined as CSS custom properties. Tailwind v4 reads these properties and auto-generates utility classes — no JavaScript config file required.

Extract a Tailwind config from any website

Paste a public URL. Get a Tailwind v4 @theme config with the site's full token set — no install. No account required.

Extract Tailwind config →