Tailwind Config Generator
Build a complete Tailwind setup visually — content globs, dark-mode strategy, prefix, important, and a full theme.extend (colors, spacing, fonts, font sizes, radius, shadows, breakpoints, container) plus the official plugins — then export it as a Tailwind v3 tailwind.config.js OR a Tailwind v4 CSS @theme block. The same theme values feed both targets; everything updates live and the whole config is captured in the URL to share.
About this ToolHow it works, benefits & use casesTap to collapse
Build a complete Tailwind setup visually and export it for the exact Tailwind version your project runs. Set your content / source globs, choose a dark-mode strategy (media, class, or a custom selector), add a class prefix, and toggle important - then fill out a full theme.extend: named colors with a picker, custom spacing, font families, font sizes, border radii, box shadows, and breakpoints, plus container centering and padding. Check any of the four official plugins (typography, forms, aspect-ratio, container-queries) and they are wired in automatically. The critical feature is dual output: a single target selector emits either a classic Tailwind v3 tailwind.config.js JavaScript config or a Tailwind v4 CSS @theme block - the same theme values feed both, only the wrapper differs. Start from a Minimal, Design system, or Blog preset, watch the output update live as you edit, and copy, download, or share it - the entire config is captured in the URL.
How to Use
- 1Pick a target: Tailwind v3 (tailwind.config.js) or Tailwind v4 (@theme CSS).
- 2Optionally start from a preset (Minimal, Design system, or Blog), then tweak.
- 3Set core options: content globs, dark-mode strategy, class prefix, and important.
- 4Fill theme.extend sections - colors, spacing, fonts, sizes, radius, shadows, breakpoints - and container settings.
- 5Toggle the official plugins you need, then copy, download, or share the live output.
Key Benefits
- Dual export from one config: Tailwind v3 tailwind.config.js and Tailwind v4 @theme CSS
- Visual builder for the full theme.extend, not just colors
- Three starter presets (Minimal, Design system, Blog)
- Dark-mode strategy picker: media, class, or a custom selector
- Prefix, important, container, and editable content globs
- One-click toggles for the four official Tailwind plugins
- Live output that is fully shareable via URL and runs entirely in your browser
Common Use Cases
- Scaffolding a tailwind.config.js for a new Tailwind v3 project
- Migrating a theme from Tailwind v3 config to a Tailwind v4 @theme block
- Defining brand colors, fonts, and breakpoints without hand-editing nested objects
- Wiring up the typography or forms plugin quickly
- Sharing a proposed Tailwind theme with a teammate via a single URL
Copy, download, share, or pipe to another tool
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class',
theme: {
extend: {
colors: {
brand: '#6366f1',
accent: '#f43f5e',
},
fontFamily: {
sans: 'Inter, ui-sans-serif, system-ui, sans-serif',
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
};e.g. tw- → tw-flex
No spacing yet — click Add to define one.
No font size yet — click Add to define one.
No border radius yet — click Add to define one.
No box shadow yet — click Add to define one.
No breakpoints yet — click Add to define one.
@tailwindcss/typography
@tailwindcss/forms
@tailwindcss/aspect-ratio
@tailwindcss/container-queries
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related guide
Related tools
- Spacing Scale CalculatorLinear, geometric, Fibonacci or modular spacing scales with a visual ruler preview and utility classes — export CSS, Tailwind v4, SCSS, JSON
- Design Token GeneratorPerceptual colour ramps + light/dark semantic tokens, live preview, WCAG audit — export CSS, Tailwind v4, W3C DTCG & more
- JavaScript FormatterFormat and beautify JavaScript code
- CSS to TailwindConvert CSS to Tailwind classes (basic)
- Palette GeneratorGenerate color palettes from a base color
- Typography Scale GeneratorModular type scale with auto line-height/tracking, optional fluid clamp() steps, and a live specimen — export CSS, Tailwind v4, SCSS, JSON
Tailwind v3 configures everything in JavaScript: the v3 target emits a tailwind.config.js with module.exports, theme.extend, a content array, darkMode, and a plugins array using require(). Tailwind v4 configures the theme in CSS: the v4 target emits an @import "tailwindcss" plus an @theme block of custom properties like --color-brand, with @source lines for content and @plugin lines for plugins. The theme values are identical across both - pick the target that matches your Tailwind version.
media follows the operating system prefers-color-scheme automatically. class activates dark styles when a .dark class is present on an ancestor. selector lets you set a custom selector (for example [data-theme=dark]). In the v3 output these become darkMode: "media", darkMode: "class", or darkMode: ["selector", "<your-selector>"]. In the v4 output the class and selector strategies are emitted as a @custom-variant dark rule scoped to your selector.