MundoKit

Theme token converter for Tailwind CSS v4

Paste a static theme object or a configuration containing theme. Preview CSS-first declarations and review what still needs manual migration.

Convert static theme tokens to CSS locally. This tool does not execute configuration code or compile Tailwind.

How it works

Supported legacy theme groups map to documented v4 namespaces, such as colors to --color-*, fontFamily to --font-*, fontSize to --text-*, spacing to --spacing-* and screens to --breakpoint-*. Nested color names flatten with hyphens; a color DEFAULT supplies its parent’s value.

Groups directly under theme replace that namespace using a wildcard initial declaration. Groups under theme.extend add or override tokens. Extensions merge into replacements before output. Font-size tokens emit a size variable and three companion variables. Omitted line-height, letter-spacing and font-weight options are set to initial so existing theme defaults do not survive an override.

All values remain text; there is no unit conversion or rounding. Use @theme inline when appropriate for references to other CSS variables. Copy the block into a v4 stylesheet and compile your application to review the result. Preview here means CSS text, not generated utility rendering.

Worked examples

Extend a color palette

{theme:{extend:{colors:{brand:{DEFAULT:"#2563eb","600":"#1d4ed8"}}}}} emits 2 declarations: --color-brand: #2563eb; and --color-brand-600: #1d4ed8;. It does not reset the color namespace.

Spacing and font-size options

{theme:{extend:{spacing:{"18":"4.5rem"},fontSize:{hero:["3rem",{lineHeight:"1.1"}]}}}} emits 5 declarations: --spacing-18: 4.5rem;, --text-hero: 3rem; --text-hero--line-height: 1.1;, and initial resets for the letter-spacing and font-weight companions.

Accepted input and migration scope

Accepts JSON plus single-quoted strings, unquoted identifier or integer keys, and trailing commas. Comments, module.exports, imports, functions, template strings, spreads and calls are rejected. Pasted JavaScript is never evaluated.

Supported groups: colors, fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, screens, spacing, borderRadius, boxShadow, dropShadow, blur, aspectRatio, transitionTimingFunction and animation. Unsupported groups fail explicitly. Top-level settings outside theme are listed as not converted. Keyframes, plugins, complex screens, fractional/escaped names, font-family option tuples, non-color DEFAULT tokens and alpha placeholders require manual migration. CSS values are checked for safe declaration boundaries, not for every property’s semantic grammar.

Application limits: 256 KiB, 10,000 lines, 64 levels and 10,000 parsed values. The mapping report shows at most 200 rows.

Frequently asked questions

Does this replace the official upgrade tool?
No. It migrates small static token snippets. The official upgrade tool handles broader project changes, and the upgrade guide describes utility and configuration differences.
Why does output contain --color-*: initial?
A colors group directly under theme replaces the color namespace. Putting it under theme.extend adds to or overrides the existing defaults instead.
Can I paste a JavaScript config file?
Paste only its static object data. Remove executable wrappers and resolve functions first. The parser rejects executable syntax instead of evaluating it.
Are CSS values or colors converted?
No. Values such as 4.5rem and #2563eb retain their text. The tool converts token names and structure, not color spaces or length units.
Will every old utility behave the same?
No. v4 changed defaults and renamed some utilities. Namespace replacement can affect multiple utility families. Compile and inspect your application after applying the block.

Sources

Last reviewed 2026-11-14; next review due by 2027-02-12. The method is written out above so you can check our math.