Tokens in Tailwind, CSS Variables, and CSS-in-JS
Integrate generated tokens into Tailwind config, CSS custom properties, and Emotion or styled-components themes.
CSS Custom Properties Output
Style Dictionary's CSS platform output generates a file of CSS custom properties: --color-primary-500: #3b82f6; --spacing-4: 16px; and so on. These variables are defined on :root, making them available globally. This is the foundation for all token consumption in the application.
Importing Tokens Globally
Import the generated CSS token file in your global stylesheet or in the root layout component: @import './tokens/tokens.css'. In Next.js, import it in app/layout.tsx or styles/globals.css. Once imported, every CSS rule and component in the application can reference the custom properties.
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