~/frontend-tools/tailwind-config-theme-builder
Tailwind Config Theme Builder
Turn your brand into a Tailwind theme: choose a primary and secondary colour, fonts, a border radius and breakpoints, and get both a Tailwind v3 tailwind.config.js and a Tailwind v4 @theme block. Each colour expands into a full 50 to 950 scale.
Using the Tailwind Config Theme Builder
Two formats for two versions
Tailwind v3 reads its theme from a JavaScript config file. Tailwind v4 moves the theme into CSS: you declare variables such as --color-brand-500 inside @theme, and Tailwind generates utilities like bg-brand-500 from them. The builder outputs both so you can use whichever version your project runs.
Colour scales
Each brand colour becomes eleven shades, from 50 for subtle backgrounds to 950 for very dark text, matching Tailwind's own naming. The scale keeps your colour's hue and adjusts lightness, with your exact colour placed at the 500 step.
Extending versus replacing
The v3 output uses theme.extend, which adds your colours alongside Tailwind's defaults instead of removing them. In v4 the same happens by default; you would have to reset a namespace explicitly to remove the built-in values.
Fonts and radius
Font families become font-sans and font-display utilities, with a sensible system fallback stack after your font. Remember to load the web fonts themselves, for example with a Google Fonts link; the theme only names them.
Frequently asked questions
Where does the v4 @theme block go?
In your main CSS file, after @import "tailwindcss";.
Will it remove Tailwind's default colours?
No. Both outputs extend the defaults.
Can I convert an existing v3 project?
Use the Tailwind v3 to v4 migration tool for class names, and this builder to recreate the theme in v4 form.