BackStyleExtract - Brand Color Extractor, Font Detector and Logo Extractor
Try free
Free Tool

Tailwind v3 → v4
Config Converter

Paste your tailwind.config.js and get the Tailwind CSS v4 @theme block instantly. Runs entirely in your browser — nothing is sent to a server.

Handles theme.extendColors → --color-*Fonts → --font-*Spacing → --spacing-*No eval()Client-side only
tailwind.config.js
tailwind.config.js← example config, paste yours
tailwind.css (v4 @theme)18 variables
tailwind.css
@import "tailwindcss";

@theme {
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;
  --spacing-128: 32rem;
  --shadow-brand: 0 4px 24px rgba(108,71,255,0.18);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.08);
  --color-primary: #6c47ff;
  --color-secondary: #1a0533;
  --color-accent: #a855f7;
  --color-neutral: #6e6e73;
  --color-white: #ffffff;
  --font-sans: 'Inter', system-ui;
  --font-mono: 'JetBrains Mono', system-ui;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}
theme.colors.*--color-*

colors.brand.500 → --color-brand-500

theme.fontFamily.*--font-*

fontFamily.sans → --font-sans: 'Inter', ...

theme.spacing.*--spacing-*

spacing.18 → --spacing-18: 4.5rem

theme.borderRadius.*--radius-*

borderRadius.lg → --radius-lg: 12px

theme.boxShadow.*--shadow-*

boxShadow.card → --shadow-card: ...

theme.extend.*merged into @theme

extend.colors merged with base colors

Lost your config file?

Just type in your live production URL.

StyleExtract scrapes your site and generates the Tailwind v4 @theme block automatically — directly from your computed CSS. Plus DESIGN.md, AGENTS.md, .cursorrules, and 12 more files.

Extract from URL →