Design Tokens to Tailwind

About Design Tokens Converter

Converts design tokens — the colours, spacing, type and shadows a design system is built from — into the formats code uses: CSS custom properties, SCSS, Less, a Tailwind v4 theme, a JavaScript or TypeScript module, or flat JSON.

It reads the W3C Design Tokens Community Group format ($value, $type, $description), which Figma variables exports and Tokens Studio write, and Style Dictionary's older value/type form. Groups nest, a group's $type is inherited by its tokens, and references such as {color.blue.500} are resolved — including references to references — with loops reported rather than followed forever.

Composite tokens become single CSS values: a shadow object becomes a box-shadow value, a font family list becomes a comma-separated stack, a border becomes width, style and colour, and numeric dimensions get px.

Where it helps

• Reads the W3C format and Style Dictionary's, with inherited types.
• Resolves references, including chains, and reports loops and missing targets.
• Turns composite shadow, border and font tokens into real CSS values.
• Writes CSS, SCSS, Less, Tailwind v4, JavaScript, TypeScript or flat JSON.
• Adds an optional prefix and selector, for namespaced or themed variables.

Limits

• It converts one token file at a time; multi-file builds with themes and platforms are Style Dictionary's job.
• Typography composite tokens are written as JSON rather than split into separate font properties.
• Colour values are passed through as written — use the colour converter to change their notation.

Frequently asked questions

Which token format should I use?

The W3C Design Tokens format ($value and $type). It is what Figma variables, Tokens Studio and Style Dictionary v4 all read and write, so tokens in it move between tools without conversion.

How are references resolved?

A value of {group.token} is replaced by that token's value, following chains until it reaches a real value. A reference to a missing token, or one that loops back to itself, stops with an error that names it.

How do I make a dark theme?

Convert your dark tokens with the selector set to [data-theme=dark] (or a media query wrapper), and your light tokens with :root. The variable names match, so components pick up the right values automatically.

Related tools

• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Structure Converter — Convert between JSON, XML, YAML, TOML, TOON, HCL and CSV
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it