Setting Up DTL with Vite

Installation

Start by installing the Vite plugin as a dev dependency:

Basic Configuration

Add the plugin to your vite.config.ts:

That's it! The plugin will automatically handle .tokens files with sensible defaults.

Creating Your First Token File

Create a token file in your project:

Using Tokens in Your Code

As JSON (Default)

As CSS Custom Properties

TypeScript Support

The plugin automatically generates TypeScript types for your tokens. Enable it in your config:

Now you'll get full autocomplete and type safety:

Hot Module Replacement

HMR is enabled by default. When you change a token file, Vite will automatically reload all modules that import it. No manual refresh needed!

Monorepo Setup

For monorepos, you can share tokens across multiple apps:

Advanced Configuration

Best Practices

• Organize tokens by domain: Keep related tokens together (colors, spacing, typography)
• Use imports for modularity: Split large token files into smaller, focused modules
• Enable type generation: Get the full benefits of TypeScript with autocomplete
• Use CSS for stylesheets: Import CSS format for global styles and CSS-in-JS
• Use JSON for components: Import JSON format for component-level styling

Next Steps