Playground

Build a Tailwind CSS 3 or 4 theme from your own tokens right in the browser, with nothing to install.

The playground runs tailwind-dictionary in the browser. Change the tokens and the result and the preview update a moment later. The input tabs:

tokens.json — base tokens in the DTCG format: palette, sizes, fonts, text styles, shadows, breakpoints, animations;
light.json and dark.json — semantic theme tokens: data-theme switches them on any element of the page;
config.json — theme aliases (themeAliases) and theme settings (themes.default, themes.prefix). The Tailwind version is switched with the button above the editor, each version has its own set of aliases. source and output are not needed: tokens come from the tabs.

Building…

{
  "color": {
    "$type": "color",
    "white": { "$value": "#ffffff" },
    "black": { "$value": "#000000" },
    "gray": {
      "100": { "$value": "#f4f4f5" },
      "200": { "$value": "#e4e4e7" },
      "500": { "$value": "#71717a" },
      "700": { "$value": "#3f3f46" },
      "800": { "$value": "#27272a" },
      "900": { "$value": "#18181b" }
    },
    "blue": {
      "400": { "$value": "#60a5fa" },
      "600": { "$value": "#2563eb" }
    }
  },
  "size": {
    "$type": "dimension",
    "4": { "$value": { "value": 4, "unit": "px" } },
    "8": { "$value": { "value": 8, "unit": "px" } },
    "16": { "$value": { "value": 16, "unit": "px" } },
    "24": { "$value": { "value": 24, "unit": "px" } },
    "32": { "$value": { "value": 32, "unit": "px" } },
    "48": { "$value": { "value": 48, "unit": "px" } }
  },
  "rounded": {
    "$type": "dimension",
    "sm": { "$value": "{size.4}" },
    "md": { "$value": "{size.8}" },
    "lg": { "$value": "{size.16}" },
    "full": { "$value": { "value": 999, "unit": "px" } }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "sans": { "$value": ["Inter", "sans-serif"] },
      "mono": { "$value": ["JetBrains Mono", "monospace"] }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400 },
      "bold": { "$value": 700 }
    },
    "leading": {
      "$type": "number",
      "tight": { "$value": 1.25 },
      "normal": { "$value": 1.5 }
    },
    "size": {
      "$type": "dimension",
      "16": { "$value": "{size.16}" },
      "24": { "$value": "{size.24}" },
      "32": { "$value": "{size.32}" },
      "48": { "$value": "{size.48}" }
    },
    "h48": {
      "$type": "typography",
      "$value": {
        "fontSize": "{font.size.48}",
        "lineHeight": "{font.leading.tight}",
        "fontWeight": "{font.weight.bold}"
      }
    },
    "h32": {
      "$type": "typography",
      "$value": {
        "fontSize": "{font.size.32}",
        "lineHeight": "{font.leading.tight}",
        "fontWeight": "{font.weight.bold}"
      }
    },
    "t16": {
      "$type": "typography",
      "$value": {
        "fontSize": "{font.size.16}",
        "lineHeight": "{font.leading.normal}",
        "fontWeight": "{font.weight.regular}"
      }
    }
  },
  "shadow": {
    "$type": "shadow",
    "card": {
      "$value": [
        { "color": "#0000001a", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px" },
        { "color": "#0000001a", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "-2px" }
      ]
    }
  },
  "screen": {
    "$type": "dimension",
    "md": {
      "min": { "$value": { "value": 769, "unit": "px" } },
      "max": { "$value": { "value": 1024, "unit": "px" } }
    },
    "lg": {
      "min": { "$value": { "value": 1025, "unit": "px" } }
    }
  },
  "animation": {
    "show": { "$value": "show 300ms ease-in forwards" }
  },
  "keyframes": {
    "$type": "number",
    "show": {
      "from": { "opacity": { "$value": 0 } },
      "to": { "opacity": { "$value": 1 } }
    }
  }
}

Building…

Preview

Building…

How it works

The browser calls generate(), the same code as in the CLI. Tokens and config are not sent to a server and never leave the page.
The generator is loaded on the first build, not with the page.
The preview is an isolated iframe with no network access. The Tailwind 4 result contains the @theme directive, which browsers do not understand, so the preview puts its variables into :root. A real project needs Tailwind.
Colors in the example are written as strings ("#2563eb") to make them easy to edit. The DTCG object form (colorSpace, components, hex) is supported too.
If the tokens have an error, a message is shown under the editor and the result stays at the last successful one.

What next

Copy the tokens and the config into your project and run the CLI: quick start. Ready-made tokens of the same structure are in pbstyles. For LESS and SCSS there is the mixin-dictionary playground.

How it works

What next

On this page