Free · No sign-up · Tailwind v3 & v4
CSS variables,as a Tailwind theme.
Paste a :root block and get Tailwind utilities for it: colours become bg-, text- and border- classes, radii become rounded-, sizes become text-. Out comes a v4 @theme block or a v3 theme.extend.
your tokens · css variables · 11 tokens
/* Your brand — Tailwind v4: paste below @import "tailwindcss"; */
@theme {
--color-brand: #5e6ad2;
--color-background: #ffffff;
--color-foreground: #0f1011;
--color-surface: #f7f8f8;
--color-accent: #e8e9fb;
--radius-sm: 6px;
--radius-md: 10px;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-2xl: 1.5rem;
--font-sans: "Inter", sans-serif;
}
Runs in your browser — nothing you paste is uploaded or stored.
live preview · your tokens
Your brand · typeface
Inter
sans-serif as fallback
- Styles
- 3 styles
- Colours
- 5 colours
type scale
Aa Bb Cc Dd Ee Ff Gg
Primary colour
#5E6AD2
How to turn CSS variables into Tailwind utilities, in three steps.
Paste your variables
A :root block, a design-system stylesheet or a shadcn/ui globals.css. var() references are resolved, and bare HSL channels like 222 47% 11% are read as colours.
Pick v4 or v3
v4 gives an @theme block for your main CSS file. v3 gives a theme.extend object for tailwind.config.js. Either way --brand becomes bg-brand, text-brand and border-brand.
Paste it in
v4: below @import "tailwindcss";. v3: merge into theme.extend. Variables that aren't colours, sizes, radii or fonts are left out and counted under the output.
Questions
How do CSS variables map to Tailwind v4?
By namespace: --color-* makes colour utilities (bg-, text-, border-), --radius-* makes rounded-*, --text-* makes font sizes, --font-* makes font families and --spacing-* makes spacing utilities. The converter puts each of your variables in the right namespace.
Can I keep my existing variable names?
Yes for the utility name: --brand becomes --color-brand, so the class is bg-brand. If your components read var(--brand) directly, keep your :root block too; the @theme block only adds utilities.
Does it work with shadcn/ui variables?
Yes. shadcn's --background, --foreground, --primary and friends come out as colour utilities, and older themes that store bare HSL channels are read as hsl() colours.
What about oklch() colours?
They're kept exactly as written: Tailwind v4 and modern browsers read oklch() directly.
More free tools, same idea.
Each one runs in your browser and works on tokens you already have.
- tailwind.config.js → @theme
Tailwind v3 → v4 converter
Paste a tailwind.config.js, get the CSS-first v4 theme: @theme, @plugin and @utility.
Open the tool → - Any tokens → any format
Design tokens converter
Convert tokens between DTCG JSON, Tokens Studio, Figma variables, CSS and Tailwind.
Open the tool → - Brand colours → shadcn :root
shadcn/ui theme generator
Brand colours in, a complete shadcn/ui :root theme out, with readable foregrounds.
Open the tool →
Your stylesheet isn't the whole system.
Read it off any live site.
Xtractly's extension reads the tokens a live page actually uses — ranked by how much of the page they cover — and exports them as Tailwind in one click, from any site.
Add to Chrome, free