Tailwind config generator
Generate Tailwind CSS setup: a v3 tailwind.config.js (content, darkMode, theme.extend, plugins) or v4 CSS with @theme and @source, including brand palette, spacing, font, radius and breakpoint extensions.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Tailwind setup
v3 produces a tailwind.config.js; v4 produces entry CSS with @theme.
Theme extension
Ticked tokens are added to theme.extend (v3) or @theme (v4).
Official plugins
Generated config
tailwind.config.jstailwindcss/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#EFF5FE',
100: '#D8E6FD',
300: '#9DC1FB',
500: '#3B82F6',
700: '#295BAC',
900: '#183462',
},
},
},
},
};
What this tool does
- Wiring Tailwind into a new project: set the content paths, dark mode and brand colour, then copy a working tailwind.config.js.
- Upgrading from Tailwind v3 to v4: flip the same settings to v4 and see the matching @theme / @source / @custom-variant form.
- Your designer handed you a single brand colour — generate the full 50–900 scale instead of guessing the light and dark steps.
- Need prose or form styles? Tick the official plugins and get the right import names and plugins array.
Example
Input
Version v3, content ./index.html and ./src/**/*.{js,ts,jsx,tsx}, dark mode class, brand colour #3b82f6, typography plugin tickedOutput
import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#EFF5FE',
100: '#D8E6FD',
300: '#9DC1FB',
500: '#3B82F6',
700: '#295BAC',
900: '#183462',
},
},
},
},
plugins: [typography],
};Switch to v4 and the output becomes CSS: @import "tailwindcss", two @source rules, @custom-variant dark and --color-brand-500: #3B82F6 inside @theme, with the plugin as @plugin "@tailwindcss/typography".
Frequently asked questions
How do the v3 and v4 configs differ?
v3 keeps everything in tailwind.config.js: content, darkMode, theme.extend and plugins. v4 is CSS-first — after @import "tailwindcss" you declare scan paths with @source, design tokens with @theme and plugins with @plugin, and dark mode becomes a @custom-variant.
What happens if a content path is wrong?
Tailwind scans nothing there, so those classes never make it into the generated CSS and the page silently loses styles. Spaces also break globs, which is why the tool rejects paths containing them — but whether a path matches your project layout is still up to you.
How is the brand palette computed?
The main colour is 500; 50, 100 and 300 mix it with white at 92%, 80% and 50%, while 700 and 900 mix it with black at 30% and 60%. That is the usual design-system approach, and you can hand-tune individual steps if the hue drifts.
class or selector for dark mode?
class suits a manual toggle — put .dark on the HTML element. selector uses a custom selector (here [data-theme=dark]), which fits projects that store the theme on <html data-theme>. On v4 both need a @custom-variant, while media is the default and needs no declaration.
Does the tool install Tailwind for me?
No. The result panel lists the packages you need (tailwindcss plus any ticked plugins); installing them and wiring up the entry CSS, PostCSS or Vite plugin is up to you. The page runs entirely in the browser and never touches the network or your files.
Keywords：tailwindtailwindcsstailwind configtailwind.config.jstailwind v4@themetailwind 配置原子化 CSS主题扩展前端工程化