Introduction

Ensure consistency in design systems and speed up the integration when updating design tokens.

Compatibility: This package is compatible with Tailwind CSS version 3.3.5 and currently supports the free version ^1 of Tokens-studio. For different versions, please verify compatibility or consider updating your Tailwind CSS installation.

Using the free version of Tokens Studio means that all your themes should be defined inside `$metadata.tokenSetOrder`
Ensure the JSON design tokens include a theme named `global`, which will be used to generate root CSS.

tokens.json

{
  "global": {
    "xs": {
      "value": "3",
      "type": "lineHeights"
    }
  },
  "dark": {
    "xs": {
      "value": "3",
      "type": "lineHeights"
    }
  },
  "$themes": [],
  "$metadata": {
    "tokenSetOrder": [
      "global",
      "dark"
    ]
  }
}