Tailwind v4 Theme Builder

Build a Tailwind v4 @theme block of color, spacing, font, breakpoint and container tokens, with dark color values by media query or .dark class.

Compose an @theme CSS block — colors, spacing, fonts, breakpoints, container sizes — and copy the output.

Dark mode

Colors

NameLightDark

Token preview

--color-primary

#10b981

--color-accent

#8b5cf6

--color-surface

#f4f4f5

--color-ink

#18181b

Spacing

Fonts

sans — The quick brown fox jumps over the lazy dog

mono — The quick brown fox jumps over the lazy dog

Breakpoints

sm: 40rem

md: 48rem

lg: 64rem

xl: 80rem

Containers

xs: 20rem

sm: 24rem

md: 28rem

Generated CSS

@import "tailwindcss";

@theme {
  --color-primary: #10b981;
  --color-accent: #8b5cf6;
  --color-surface: #f4f4f5;
  --color-ink: #18181b;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-8: 2rem;
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
}

@layer base {
  @media (prefers-color-scheme: dark) {
    :root {
      --color-primary: #34d399;
      --color-accent: #a78bfa;
      --color-surface: #18181b;
      --color-ink: #fafafa;
    }
  }
}

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use Tailwind v4 Theme Builder

1

Add color tokens

On the Colors tab, define your palette names (primary, accent, surface, ink). Each token gets a light hex and a dark hex paired together for prefers-color-scheme support.
2

Build the spacing scale

Switch to the Spacing tab to add steps. Set the token name and a CSS length value (rem, px, em). The preview renders bars proportional to the value so you can spot uneven scales.
3

Define fonts, breakpoints, containers

Use the Fonts, Breakpoints, and Containers tabs to fill out the rest of the design system. Container sizes drive Tailwind v4's @container utilities for component-level breakpoints.
4

Toggle dark pairing and copy

Toggle the dark-mode checkbox to wrap dark hex values in a prefers-color-scheme media query. Press Copy on the Generated CSS panel to grab the @theme block.

Questions and answers

What is Tailwind v4 Theme Builder?

Tailwind v4 moves theme setup from tailwind.config.js into CSS: an @theme block declares tokens as custom properties such as --color-brand, and Tailwind generates utilities from them. This builder edits color, spacing, font, breakpoint and container tokens, pairs each color with a dark value and outputs the CSS.

How is this different from a tailwind.config.js editor?

Tailwind 4 moves theme configuration into CSS via the @theme at-rule and CSS variables. The output here is the new format — no JavaScript config file, no PostCSS plugin tweaks, plain CSS variables Tailwind reads at build time.

Does the dark-mode toggle generate two themes?

It emits one @theme block plus a prefers-color-scheme: dark media query that overrides the same color custom properties with dark values. Components using the tokens automatically swap with the system color scheme.

Does it send my data to a server?

No. Token definitions and the generated CSS stay entirely in your browser. Nothing about your design system is transmitted.

Can I export only part of the theme?

The generator outputs every section by default, but unused tokens can simply be deleted from the editor before copying. The output regenerates as you remove rows so the @theme block always matches what you see.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/tailwind-v4-theme-builder/

For automation planning, fetch the canonical contract at /api/tool/tailwind-v4-theme-builder.json.

Tailwind v4 Theme Builder