Tailwind Config to CSS Variables Converter

Turn a Tailwind theme object (colors, spacing, fontSize, etc.) into CSS custom properties, flattening nested tokens to kebab-case variables. Runs in your browser.

CSS custom properties

:root {
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
  --color-accent: #ec4899;
  --spacing-128: 32rem;
  --radius: 0.25rem;
  --radius-xl: 1rem;
}

Paste the theme (or theme.extend) object — JSON or a JS object literal. Full config files with require() or functions can't be evaluated in the browser; copy just the theme tokens. Nested keys flatten to kebab-case variables and DEFAULT drops the suffix.

General calculation reads

Amazon affiliate
How Not to Be Wrong
Jordan Ellenberg - math thinking
Shop on Amazon
The Joy of X
Steven Strogatz - accessible math
Shop on Amazon
Scientific calculator (Casio fx-991EX)
Shop on Amazon

As an Amazon Associate we may earn from qualifying purchases. This does not add cost for you.

About this tool

Tailwind's theme is a structured object of design tokens — colors, spacing, font sizes, radii — and sometimes you want those same tokens as plain CSS custom properties: to share them with non-Tailwind code, to drive a component library, or to expose them for runtime theming. This converter takes your theme object and emits a :root block of CSS variables, flattening nested groups into readable kebab-case names (colors.brand.500 becomes --color-brand-500) and dropping the DEFAULT key so it maps to the bare variable. It accepts either strict JSON or a relaxed JavaScript object literal — with unquoted keys, single quotes, and trailing commas — so you can paste straight from a config. One deliberate limit: it reads the theme tokens, not a full tailwind.config.js, because that file is JavaScript that may call require() or use functions, which cannot be safely evaluated in a browser. Copy just the theme (or theme.extend) object. Conversion runs locally.

How to use it

  • Copy your theme or theme.extend object from tailwind.config.
  • Paste it (JSON or JS object literal both work).
  • Copy the generated :root CSS custom properties.
  • Use the variables anywhere — including outside Tailwind.

Frequently asked questions

Can I paste my whole tailwind.config.js?
Paste just the theme object, not the entire file. A full config is JavaScript that may use require(), module.exports, or functions, which cannot be safely run in the browser. Copy the theme (or theme.extend) block — JSON or a JS object literal both work.
How are nested tokens named?
They are flattened with the group as a prefix and joined by hyphens: colors.brand.500 becomes --color-brand-500, spacing.4 becomes --spacing-4. A DEFAULT key drops the suffix, so borderRadius.DEFAULT becomes --radius.
Does it accept relaxed (non-JSON) syntax?
Yes. It tolerates unquoted keys (including numeric ones like 500), single quotes, and trailing commas — the way object literals are usually written in a config — and falls back to strict JSON parsing first.
Which theme sections are supported?
Common ones get friendly prefixes: colors → --color-*, spacing → --spacing-*, fontSize → --text-*, borderRadius → --radius-*, boxShadow → --shadow-*, and more. Any other section is flattened with its kebab-cased name as the prefix.
Are arrays (like fontFamily) handled?
Yes. An array value is joined with commas into a single variable, which suits font-family stacks — fontFamily.sans: ["Inter", "sans-serif"] becomes --font-sans: Inter, sans-serif.
Is my config uploaded?
No. Parsing and conversion run entirely in your browser with no network request.

Related tools