Build a complete Tailwind theme starter — primary and secondary color scales, font stack and radius scale — exported as a v4 @theme block or a v3 tailwind.config.js.
Settings
Generated locally in your browser — your settings and results never leave this page.
A theme, not just a palette
A Tailwind project feels like its own product when three things change together: colors, type and radius. This generator produces all three coherently — full 50–950 scales for primary and secondary (OKLCH-generated), a font-sans stack with your typeface first, and a six-step radius scale derived from one base value — previewed live on real UI elements before you commit.
v3 and v4, both first-class
Tailwind v4 replaced the JavaScript config with CSS-first configuration: an @theme block of custom properties in your main CSS file, after @import "tailwindcss". v3 projects still use tailwind.config.js. The generator emits both formats from the same controls — and this page deliberately consolidates the “config generator” and “theme generator” intents, because they are one operation with two output formats.
Worked example
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--color-primary-500: oklch(58.5% 0.233 277.1);
--color-secondary-500: oklch(64.8% 0.15 180.4);
--radius-md: 8px;
/* …full scales… */
}Best practices
- Keep primary for actions and identity; use secondary sparingly — accents, highlights, secondary buttons.
- Radius communicates personality: 2–4px reads corporate, 8px neutral-modern, 12px+ friendly. One base, used everywhere, beats per-component values.
- Load the font you reference — the generator warns about this on every run, because a stack referencing an unloaded font silently falls back.
Limitations
- This is a starter theme: breakpoints, shadows and spacing overrides are separate decisions (the Design Token Generator covers spacing and type scales).
- Migrating an existing v3 config? Use the v3 to v4 Converter instead — it maps what you already have.
How to use the Tailwind Theme Generator (v3 config + v4 @theme)
- Pick your primary and secondary brand colors.
- Type the sans font name and set the radius base.
- Check the live preview — swatches, type sample and buttons.
- Copy the v4 @theme block or the v3 tailwind.config.js.
Frequently asked questions
What exactly does the theme include?
Two full 50–950 color scales (generated perceptually in OKLCH), a font-sans stack with your font first, and a six-step border-radius scale derived from your base — the pieces that make a project instantly recognizable as its own.
Where does the v4 @theme block go?
In your main CSS file, after @import "tailwindcss". Tailwind v4 has no JavaScript config by default — @theme custom properties ARE the configuration, and utilities like bg-primary-500 appear automatically.
Does this replace a "Tailwind config generator"?
Yes — a config generator and a theme generator take the same inputs and differ only in output format, so they are consolidated: this tool emits both the v3 config and the v4 @theme from one set of controls.
Why does the output not include my font's @font-face?
Because the theme only references the font. Loading it — self-hosted @font-face or a font service — is a project decision the generator cannot make for you; the warning reminds you every time.
Build a Tailwind theme from one colour
A Tailwind colour scale and theme config generated from a single brand colour.
- HEX to Tailwind ColorFind the nearest Tailwind colour to the one you have.
- Tailwind Color Palette GeneratorGenerate a full 50-950 scale around it.
- Tailwind Theme Generator (v3 config + v4 @theme) you are hereAssemble the scale into a theme config.
