Share Tailwind Config Generator with anyone — no login required.
Shareable link
No login required
Works on any device
No account needed
Share via
Advertisement
How to Use
1 Add your custom colors by entering a name (e.g. 'brand') and a hex value (e.g. '#6366f1')
2 Add custom font families with a name and comma-separated font stack
3 Set custom breakpoints with a name (e.g. 'xs') and a px/rem value
4 Choose dark-mode strategy: class (toggle via .dark), media (prefers-color-scheme), or selector
5 Toggle 'Extend defaults' on to add to Tailwind's built-in palette, or off to replace it
6 Copy the generated JS or TS config — it's ready to drop into your project root
Features
Outputs both tailwind.config.js (CommonJS) and tailwind.config.ts (ESM + satisfies Config) in one click
Custom color palette with validation — warns if a value doesn't look like a valid CSS color
Custom font family stacks — each font name becomes a new key under theme.extend.fontFamily
Custom breakpoints — adds named screen sizes like 'xs: 480px' to theme.extend.screens
CSS custom properties block generated alongside the config for CSS-variable-based theming
Dark mode: choose class, media, or selector strategy — the right choice for your stack
Why it Matters
Tailwind CSS is ubiquitous in modern front-end development, but writing the config from scratch — especially when juggling multiple color tokens, font stacks, and breakpoints — takes time and invites typos. A generator removes the boilerplate and gives you a syntactically correct, copy-paste-ready file in seconds. It also makes the 'extend vs replace' decision explicit, which is a common source of confusion for teams new to the framework.
★★★★★
Use Cases
New Project Setup
Bootstrap a design-system config in seconds and focus on building, not boilerplate
Design Handoff
Translate a Figma colour palette into a Tailwind config your dev team can use immediately
Theme Customisation
Add your brand colours and font choices to an existing Tailwind project without touching docs
Dark-Mode Setup
Choose and configure the right dark-mode strategy for your SSR or SPA framework
What the generator produces
For each configuration you build, the generator outputs three things: a tailwind.config.js (CommonJS, compatible with any Node toolchain), a tailwind.config.ts (typed with satisfies Config for TypeScript projects), and a CSS custom properties block for CSS-variable-based theming.
Extending vs replacing the default theme
Tailwind ships with an extensive built-in color palette, font-family list, and screen breakpoints. The theme.extend key lets you add to these without removing the defaults. Placing values directly under theme (without extend) replaces the defaults — useful if you want your project to only use your design system’s tokens, nothing else.
Privacy
Config generation happens entirely in your browser. No code or token names are sent to a server.
Frequently Asked Questions
What is the difference between 'extend' and replacing defaults?
When 'Extend defaults' is on, your custom values are merged into Tailwind's built-in palette under theme.extend — so you keep all the default colors (slate, red, blue, etc.) and add your own on top. When it's off, the theme key replaces defaults entirely and only your colors exist. For most projects, extending is the right choice.
Which dark-mode strategy should I use?
Use 'class' if you want to toggle dark mode with a .dark class on the <html> element — the most common choice for apps with a user-controlled theme toggle. Use 'media' to follow the OS preference automatically. Use 'selector' (Tailwind v3.4+) for finer control over nested scope.
Does this work with Tailwind v3 and v4?
The generated config is compatible with Tailwind CSS v3. Tailwind v4 uses a different CSS-first approach — there is no tailwind.config.js in v4. If you are on v4, use the CSS variables output block instead and drop it into your global CSS file.
How do I use the CSS variables block?
Copy the :root { ... } block into your global CSS file (e.g. globals.css). The variable names follow the pattern --tw-color-<name>. You can reference them in CSS via var(--tw-color-brand) or map them into Tailwind using a plugin.
Can I add custom spacing or border-radius values?
The current generator covers the most common customisations: colors, fonts, breakpoints, and dark mode. Spacing and border-radius customisation are on the roadmap.