CSS Variables to Tailwind Config Converter

How to use the CSS Variables to Tailwind

Paste your CSS — a whole stylesheet is fine; only custom properties are read.
Choose Tailwind v3 config (a module.exports colors object) or Tailwind v4 @theme.
Pick Literal values to copy the colours, or var() references to keep your variables as the single source of truth (best for dark mode and theming).
Copy or download the result into tailwind.config.js or your main CSS file.

What does this converter do?

Many projects start with design tokens written as CSS custom properties — --primary: #ff0055;, --brand-500: #6366f1;. When you adopt Tailwind you need the same colours in its theme so classes like bg-primary and text-brand-500 exist. Retyping them is slow and error-prone; this tool parses every custom property, keeps the ones that are colours and writes the Tailwind structure for you.

How variables are grouped

--brand-50 … --brand-900 become a nested brand: { 50: …, 900: … } object, giving you bg-brand-50 through bg-brand-900.
Suffixes like -light, -dark, -hover and -foreground are grouped under their base name; the plain variable becomes DEFAULT, so bg-primary and bg-primary-light both work.
A leading color- prefix is removed (--color-surface → surface).
Non-colour tokens such as --radius-md: 8px or font stacks are skipped and listed.

Tailwind v3 vs v4

Tailwind v3 configures colours in JavaScript under theme.extend.colors. Tailwind v4 moved configuration into CSS: any --color-* variable inside an @theme block generates colour utilities, and v4’s default palette uses OKLCH — which is why the v4 output converts literal values to oklch().

Literal values or var() references?

Referencing variables (primary: 'var(--primary)') means you can redefine --primary inside .dark or a brand theme and every Tailwind class follows automatically. Note that Tailwind v3 can’t apply opacity modifiers like bg-primary/50 to plain var() colours; store channels instead (--primary: 255 0 85 with rgb(var(--primary) / <alpha-value>)) if you need them. Tailwind v4 handles opacity modifiers on variables via color-mix().

Tools that pair well with the CSS Variables to Tailwind

CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
Color Mixer — Pick two colours and a number of steps to get evenly blended transition colours — perfect for gradients, borders, charts and hover states.

Frequently asked questions

Does it work with Tailwind CSS v4?

Yes. Choose “Tailwind v4 @theme” to get a CSS block with --color-* variables, which v4 turns into utilities such as bg-primary.

Which colour formats are recognised?

HEX (3, 4, 6 and 8 digits), rgb()/rgba(), hsl()/hsla(), hwb(), oklch(), oklab(), CSS named colours and references to other variables like var(--blue-500).

What happens to non-colour variables?

Spacing, radius, font and other non-colour tokens are skipped and listed under the input so you can move them to the right part of your config manually.

Is my CSS uploaded?

No — parsing runs in your browser. Your input is only remembered in this browser’s local storage for convenience.