From Figma

The native Figma export works without conversion: Variables → right click on a collection → Export modes gives one *.tokens.json file (DTCG) per mode.

How to arrange the files

1. Put the file with the primitives (the collection without modes) into source.
2. Put the files of the modes into themes: one file per theme (light, dark, …). The file name does not matter.

{
  "version": 4,
  "source": ["tokens/Primitives.tokens.json"],
  "themes": {
    "light": ["tokens/Light.tokens.json"],
    "dark": ["tokens/Dark.tokens.json"]
  },
  "output": "./styles",
  "themeAliases": {
    "color": "color",
    "radius": "radius",
    "spacing": "1px",
    "font": "font/family",
    "text": "font/size"
  }
}

Colors given as objects (colorSpace, components, hex), references ("{color.blue.600}") and the service $extensions (com.figma.*) are handled. More about modes in Themes.

Numbers without a unit

Figma exports a FLOAT variable as a number without a unit ("$type": "number"). --radius-4: 4 is not valid CSS, so bare numbers in dimension keys get a unit. The numberUnit option sets it:

Dimension keys in Tailwind 4: spacing, radius, text, breakpoint, container, blur. In Tailwind 3: spacing, borderRadius, borderWidth, fontSize, screens, width, height, minWidth, maxWidth, minHeight, maxHeight, size, blur, inset, gap, margin, padding. Other keys (leading, font-weight, opacity, z-index) and the value 0 stay numbers.

Limits

Figma does not export the variable description, and composite styles (typography, shadows) are incomplete in the native export.