What the generator produces
For each configuration you build, the Tailwind Config Generator outputs three things:
- tailwind.config.js — CommonJS, compatible with any Node toolchain
- tailwind.config.ts — TypeScript, typed with
satisfies Configfor full IntelliSense - CSS custom properties — a
:root { }block for use outside Tailwind utilities
All three are kept in sync; change an input and all three update instantly.
Setting up custom colours
Each colour needs a name (the Tailwind class stem) and a value (CSS hex or function). The colour picker lets you choose visually while the hex input gives precision. Examples:
| Name | Value | Generated class |
|---|---|---|
brand | #6366f1 | bg-brand, text-brand |
accent | #f59e0b | bg-accent, text-accent |
surface | #f8fafc | bg-surface |
In extend mode, these join Tailwind’s existing palette. In replace mode, only your colours exist.
Custom font families
Enter a name (Tailwind font- stem) and a stack (comma-separated CSS font families). Examples:
sans → Inter, system-ui, -apple-system, sans-serif
mono → JetBrains Mono, Fira Code, monospace
display → Fraunces, Georgia, serifThese map to font-sans, font-mono, font-display classes.
Custom breakpoints
Add breakpoints with a name and a value including the unit (px, em, rem). Common additions:
| Name | Value | Use case |
|---|---|---|
xs | 480px | Small phones |
3xl | 1920px | Ultra-wide screens |
4xl | 2560px | 4K monitors |
The generator warns if a value is missing a unit (e.g. 768 instead of 768px).
Dark mode strategies
class — set darkMode: 'class' and add .dark to <html> via JavaScript to toggle. Most common in custom dark mode implementations.
media — automatic. Follows OS preference (prefers-color-scheme: dark). No JavaScript needed, but you cannot toggle independently of OS.
selector — Tailwind v3.4+. Use a custom selector like [data-theme="dark"] for maximum flexibility.
Using the output
Copy the JS or TS config and drop it at your project root as tailwind.config.js or tailwind.config.ts. If using CSS variables, paste the :root { } block into your global stylesheet. No build step is required for the config itself — it takes effect the next time your bundler restarts.