frankstallone/design-token-tailwind-config-creator

An app that will make a valid Tailwind config from your design tokens.

Design Token Tailwind Config Creator

Take your design system into the Tailwind utility class age. Uses Style Dictionary design tokens to create a valid tailwind.config.js file.

Uses

• Style Dictionary 3.0
  • JSON5 syntax for color example
• Prettier
• Lodash

Installation

yarn

Build

yarn build

Capabilities

1.0 ships with being able to process colors, font family, font weight and font size tokens.

Example fold structure

tokens
└── color
	└── base.json5
	└── font.json5
└── font
	└── family.json5
	└── size.json5
	└── weight.json5

Change log

1.0.3

• Core colors now distinguished from other colors in project
• Clearer naming in tailwind.template
• Replaced .forEach() with .map() functions for unaltered variables