Visually configure Tailwind CSS theme extensions for colors, spacing, and breakpoints with config output.
This tool assembles the theme.extend block of a tailwind.config.js file from form fields instead of hand-written JavaScript. You name a custom color, a spacing value, or a breakpoint, and it returns the config snippet that registers them, ready to paste into your project. The mistake that trips most people: adding entries under theme.colors rather than theme.extend.colors. That replaces Tailwind's entire default palette, so bg-red-500 and every stock color silently stops working. Keep custom entries under extend and the defaults survive alongside them.
A concrete input and expected output from the current implementation.
Input
Color: brand = #0F766E Spacing: 18 = 4.5rem Breakpoint: 3xl = 1792px
Expected output
theme: {
extend: {
colors: {
brand: '#0F766E',
},
spacing: {
18: '4.5rem',
},
screens: {
'3xl': '1792px',
},
},
} The spacing value follows Tailwind's scale convention, where each integer unit equals 0.25rem, so 18 becomes 4.5rem (18 x 0.25). Because the entries sit under extend, they merge with the defaults: brand adds text-brand and bg-brand beside the stock palette, and 3xl adds a min-width 1792px responsive prefix after the default 2xl screen.
Each namespace registers a different family of classes. A color under colors generates color utilities such as bg-brand, text-brand, and border-brand; a spacing key generates dimension utilities such as p-18, w-18, and gap-18; a breakpoint generates a responsive prefix such as 3xl: that gates any utility at its min-width. The output mirrors that mapping, so what you configure in a field becomes usable classes once the config loads.
Everything lands under theme.extend, the key that layers your values on top of Tailwind's defaults instead of substituting them. A custom color named brand coexists with the stock palette, and a custom 3xl breakpoint sits after the default sm through 2xl screens. The same entry placed directly under theme would wipe the matching default namespace; this output avoids that by construction.
The snippet this tool produces is in Tailwind v3's JavaScript config format. Tailwind v4 themes colors, spacing, and breakpoints in CSS with @theme variables instead, so the two formats do not drop into the same project. Translate the same values into variables such as --color-brand for v4, or confirm your project's version before relying on the generated block.
No, as long as everything stays under extend. Tailwind merges extended values with the default theme, so brand sits beside red-500 and 3xl follows 2xl. One exception: a key that duplicates a default name, such as a spacing key called 4, overrides just that single default rather than coexisting with it.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.