Tailwind theme generator

Define design tokens and get a valid Tailwind v4 @theme block —--color-*, --font-*, --spacing-*, and--breakpoint-*. No JS config.

~~~

Presets

Sections

Token name becomes --color-{name} → utilities likebg-brand-500.

Token name becomes --font-{name} → font-display.

Named keys become --spacing-{name} → p-18,gap-gutter.

Token name becomes --breakpoint-{name} →3xl:flex.

~~~

Fix these

@theme output

Example utilities

Add valid tokens to generate an @theme block.

This theme is stored in the URL for sharing.

Theme too large for a shareable URL

Your theme and copy-ready output still work, but this URL will not contain the current state. Remove some tokens or shorten values to enable sharing again.

~~~

About this tool

Tailwind v4 is CSS-first: put design tokens in an @theme block instead of tailwind.config.js. Namespaces map to utilities —--color-* for colors, --font-* for font families,--spacing-* for spacing/sizing, --breakpoint-* for responsive variants.

Paste the output into your main CSS file after @import "tailwindcss".

~~~