theme.css: Tailwind v4 Theme From Any Website's Design System

Tailwind CSS v4 introduced a major shift in how themes are configured: instead of a JavaScript config file, the theme now lives directly in CSS using the @theme at-rule. DesignDNA's theme.css output is built for exactly this new model — a drop-in file that extends Tailwind's theme with every design token extracted from your scanned website.

What theme.css Contains

/* ─── theme.css ─────────────────────────────────── */
/* Generated by DesignDNA — designdna.site          */
/* Drop into your Tailwind v4 project               */

@import "tailwindcss";

@theme {
  /* ── Colors ── */
  --color-primary: #6D3FFF;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #F4F4F5;
  --color-secondary-foreground: #18181B;
  --color-background: #09090B;
  --color-foreground: #FAFAFA;
  --color-muted: #27272A;
  --color-muted-foreground: #A1A1AA;
  --color-border: #3F3F46;
  --color-destructive: #EF4444;
  --color-coral: #FF6B4A;
  --color-ink-soft: #71717A;

  /* ── Typography ── */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* ── Spacing ── */
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.18);
}

Every variable inside @theme automatically becomes a Tailwind utility class. No configuration file needed. No plugin. Just import this file and every token is accessible via utility classes.

How Tailwind v4 @theme Works

In Tailwind CSS v4, the @theme directive maps CSS custom properties to utility class namespaces. Variables under --color-* become bg-*, text-*, and border-* utilities. Variables under --spacing-* become p-*, m-*, gap-* utilities. Variables under --radius-* become rounded-* utilities.

This means:

<!-- After importing theme.css, these just work: -->
<div class="bg-primary text-primary-foreground rounded-pill px-4 py-2">
  Extracted design token as utility class
</div>

<div class="bg-background text-foreground font-display">
  Typography extracted from the scanned site
</div>

<div class="shadow-lg rounded-xl border border-border bg-muted">
  Card with extracted shadow and surface tokens
</div>

These aren't arbitrary class names — they map directly to the values DesignDNA extracted from your target website. The bg-primary class uses the exact hex value that was the dominant interactive color on that site.

Dropping theme.css Into a Project

New Tailwind v4 project

/* app.css or globals.css */
@import "./theme.css";

That's it. Your entire Tailwind build now inherits the extracted design system.

Replacing an existing theme

If you have an existing Tailwind config, theme.css lets you migrate incrementally. Override only the tokens you want to update by importing theme.css and then overriding specific values below it:

@import "./theme.css";

@theme {
  /* Override only what you need */
  --color-primary: #FF6B4A; /* Change brand color */
}

Using with shadcn/ui

shadcn/ui v2 ships with Tailwind v4 support. The shadcn theme format directly mirrors the @theme block structure. Your theme.css is directly compatible — copy the --color-* values into your globals.css @layer base block or @theme block.

theme.css for Vibe Coding and AI Generation

theme.css is particularly valuable for AI coding sessions because Tailwind utility classes are the most common output format for AI-generated UI. Tools like v0, Lovable, and Cursor's Agent mode all heavily favor Tailwind classes.

When you:

Import theme.css into your project
Tell your AI agent: "Use Tailwind utility classes. The design system is defined in theme.css — use bg-primary, text-foreground, rounded-lg, shadow-md etc. to reference our design tokens."

...you stop the AI from generating hardcoded inline styles and start getting clean, token-referenced utility class output that matches your extracted design system.

This is the antidote to AI slop: structured constraints that channel AI generation toward your actual design language instead of generic patterns.

Comparing theme.css vs variables.css

Both files contain the same token values, but structured for different use cases:

	variables.css	theme.css
Format	Plain `--var: value` in `:root`	`--var: value` inside `@theme`
Best for	Vanilla CSS, CSS Modules, any framework	Tailwind CSS v4 projects
Utility classes	No	Yes (auto-generated by Tailwind)
Dark mode	Manual `@media` overrides	Tailwind `dark:` variant
Framework dep	None	Requires Tailwind CSS v4

Use variables.css for framework-agnostic projects or when you need runtime CSS variable control. Use theme.css when your stack is Tailwind.

Extracting theme.css from Any Website

Scan any website with DesignDNA and get a Tailwind v4-ready theme.css instantly. Extract a competitor's design system, a Dribbble inspiration, or your own production site — and have a working Tailwind theme in under a minute.

Generate your theme.css now →

Back to Blog