Tailwind config generator — v4 @theme CSS or v3 tailwind.config.js

How to use the Tailwind config generator

1. Choose the Tailwind version: v4 (CSS-first) or v3 (tailwind.config.js).
2. List Colours (name: value), one per line, for example brand: #4f46e5. Hex, rgb and oklch values all work.
3. Enter Sans font families (comma-separated) and Monospace font families.
4. Add Extra breakpoints (name: width) such as 3xl: 120rem, choose Dark mode (Follow the OS or .dark class) and tick the Typography plugin or Forms plugin.
5. For v3 only, check the Content paths (v3). Then run the install command and save the file.

What it does and when to use it

Most Tailwind projects add brand colours, a chosen font and sometimes a wider breakpoint to the defaults. Where those go changed between versions: v3 used a JavaScript config, v4 moved the theme into CSS. The Tailwind docs on theme variables explain the v4 approach in full.

Use it when you start a Tailwind project or move design tokens into Tailwind. If you write plain CSS rather than Tailwind, the CSS variables generator produces the same kind of tokens as :root custom properties. Tailwind v4 projects usually run on Vite; the Vite config generator can add the Tailwind plugin. For breakpoints in hand-written CSS, see the media query generator.

How it works

v4. The file starts with @import "tailwindcss";, then one @plugin line per ticked plugin. With the .dark class option it adds @custom-variant dark (&:where(.dark, .dark *));. Inside @theme, colours become --color-<name>, fonts become --font-sans and --font-mono, and breakpoints become --breakpoint-<name>. Names are lower-cased with spaces turned into hyphens.

v3. The file exports an object with content, darkMode ('selector' or 'media') and theme.extend, so your values are added to Tailwind’s defaults rather than replacing them. Plugins are imported at the top.

Font names with spaces are quoted, and a system fallback stack is always added after your fonts.

Worked examples

Default v4 setup.

@theme {
  --color-brand: #4f46e5;
  --color-accent: #f59e0b;
  --color-ink: oklch(0.21 0.03 265);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --breakpoint-3xl: 120rem;
}

Install: npm install tailwindcss @tailwindcss/vite.

The same values for v3 with Typography. The file begins import plugin0 from '@tailwindcss/typography';, sets darkMode: 'selector', and lists brand: '#4f46e5', under theme.extend.colors.

One colour, OS dark mode, Forms plugin. v4, colour primary: #0f766e, sans font Source Sans 3, no mono font or breakpoints. The output has @plugin "@tailwindcss/forms";, no custom-variant line, and --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;.

Limits and tips

• Colour values are not checked. A typo such as #4f46e passes through; check the result in the browser.
• Shades are not generated. brand is one colour, not a 50–950 scale; add brand-600 lines yourself if you need steps.
• Prefer v4 for new projects; v3 is the previous major version.