Tailwind config generator
Build a tailwind.config.js file with your brand colors, custom fonts and spacings, without hand-writing the JavaScript object. 100% local processing — nothing is sent to a server.
How it works
Instead of manually writing the Tailwind CSS configuration object, enter your brand colors, font families and additional spacings in the forms above: the tool assembles a valid tailwind.config.js file live, with a properly structured theme.extend section, ready to replace your existing file.
Why use theme.extend rather than theme directly?
Placing your additions in theme.extend keeps all of Tailwind's default values (standard colors, sizes, spacings) while adding your own values; redefining theme directly would entirely replace the default values, which is rarely what you want.
What does choosing "class" or "media" for dark mode mean?
With class, dark mode is activated by adding the dark class on a parent element (usually <html>), which lets you toggle it manually via JavaScript; with media, Tailwind automatically follows the user's system preference with no manual control possible.
The configuration file is generated directly in your browser, with no data sent to a server.