Tailwind Config Theme Builder
Free tool No sign-up
About this tool
Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.
Advertisement
Why use this builder
One paste, four formats
Pick a primary color once. Get Tailwind v3 config, v4 @theme block, plain CSS variables, AND shadcn/ui tokens — all from the same input. Switch with one click.
Dark mode wired in
Light and dark token sets generated automatically with the correct shade inversion. Drop the output into your stylesheet and toggle the .dark class — no manual remapping.
WCAG contrast checks built in
Every foreground/background pair is checked against WCAG 2.1 AA. If your theme produces unreadable combinations, you see the failing pair with its exact ratio before you ship.
OKLCH-native, perceptually uniform
Color scales are derived in OKLCH space so each shade step looks evenly spaced. No more 200 looking almost identical to 300 — the perceptual jump per step stays consistent.
How to use it
01
Pick your primary color
Click the colour swatch or type a hex. The 50→950 scale derives from this single input via a Tailwind-calibrated lightness curve.
02
Set accent + neutral
Accent is your secondary brand colour (links, badges). Neutral becomes your gray scale — pick a hex with a slight hue tilt for a warmer or cooler theme.
03
Toggle what you need
Semantic tokens, dark mode, and utility colours (destructive/success/warning) each toggle independently. Turn off what your project does not use.
04
Choose your output format
Tailwind v3 for classic config, v4 @theme for CSS-first projects, plain CSS variables for vanilla projects, shadcn/ui for projects already using that component system.
05
Review contrast warnings
If any foreground/background pair fails WCAG AA, the warnings panel shows the failing ratio. Tweak your primary until the scale clears.
06
Copy and paste
Click Copy. Paste into tailwind.config.js, app.css, globals.css, or wherever your theme tokens live. Reload your dev server.
Output format comparison
| Format | Goes in | Syntax | Notes |
|---|---|---|---|
Tailwind v3 | tailwind.config.js | JS object | Classic theme.extend.colors with hex values. Use Tailwind's `dark:` variant for mode switching. |
Tailwind v4 @theme | app.css | CSS @theme {} | CSS-first config. OKLCH values. Dark mode via .dark class selector layer. |
CSS variables | globals.css | :root + selector | Framework-agnostic. Reference as var(--color-primary-500). Works in any project. |
shadcn/ui | globals.css | :root + .dark | Space-separated HSL (shadcn convention — no hsl() wrapper). Wrap at usage: hsl(var(--primary)). |
Semantic token mapping
How each semantic token resolves to a scale shade in each mode. Light mode uses 600-weight brand colors against white backgrounds; dark mode uses 500-weight against near-black backgrounds for better contrast.
Mapping table
background → light: white dark: neutral-950 foreground → light: neutral-950 dark: neutral-50 primary → light: primary-600 dark: primary-500 primary-foreground → light: primary-50 dark: primary-50 muted → light: neutral-100 dark: neutral-800 muted-foreground → light: neutral-500 dark: neutral-400 border → light: neutral-200 dark: neutral-800 ring → light: primary-600 dark: primary-400 destructive → light: destructive-600 dark: destructive-500
Pro tips
01
Tweak primary if dark mode contrast fails
If the warnings panel reports dark-mode contrast failures, your primary is probably too dark. Try a primary in the 0.55–0.65 lightness range so its 500 shade still contrasts against neutral-950 backgrounds.
02
Neutral hue tilts the whole feel
Pure-gray neutral (`#71717a`) is safe. A slight blue tilt feels cooler/more corporate; warm gray (a hint of red/brown) feels softer/more editorial. Try `#78716c` for warmth or `#64748b` for cool.
03
Utility colors are intentionally fixed
Destructive (red), success (green), and warning (amber) do NOT derive from your primary. Universal UX expectation overrides theme aesthetics — a "delete" button in a teal theme should still read as red.
04
Output formats are not interchangeable
Tailwind v3 expects hex inside JS; v4 wants OKLCH in CSS @theme; shadcn wants space-separated HSL. Pick the one matching your project — pasting the wrong one breaks nothing but produces zero working tokens.
Related tools
Advertisement