Style Dictionary: Transforming and Generating Tokens
Configure Style Dictionary to transform raw token files into CSS variables, JS constants, and Tailwind config.
What Is Style Dictionary
Style Dictionary (created by Amazon) is a build tool that takes design token definitions in JSON format and outputs them in any target format: CSS custom properties, JavaScript ES modules, Sass variables, iOS Swift constants, Android XML resources, and any custom format you define. One source of truth, many outputs.
Installation and Initialization
Install with npm install --save-dev style-dictionary. Initialize a project structure with npx style-dictionary init, which creates a config.json (or config.js) and a tokens/ directory. The config tells Style Dictionary where to find token files and where to write the outputs.
All lessons in this course
- What Are Design Tokens and Why They Matter
- Style Dictionary: Transforming and Generating Tokens
- Tokens in Tailwind, CSS Variables, and CSS-in-JS
- Multi-Theme and Multi-Brand Token Architecture