Tokens Exporter to CSS

About this plugin

Tokens Exporter to CSS turns your design tokens into production-ready code. Supports standard CSS and Tailwind CSS v4.

EXPORT FORMATS

1. CSS Variables — :root for light theme, custom selector for dark mode. Typography as classes or @layer rulesets blocks.
2. Tailwind — @theme and @layer utilities for styles.

WHAT GETS EXPORTED

1. Color Variables — Hex, rgba, and var() references preserved.
2. Number Variables — Unit handling (px, rem, %, deg, opacity).
3. Typography Styles — CSS classes or @layer rulesets blocks with full font properties (CSS only).
4. Effect Styles (shadows) — First shadow per effect style as a CSS variable (e.g. --shadow-md).
5. Color Styles — Solid colors and gradients as variables.

FEATURES

1. Dark mode by name (modes with "dark" in the name).
2. Unit detection from variable names.
3. Variable aliases as var() references.
4. Custom prefixes per category.
5. Single file or ZIP with optional index files.
6. Typography Style Output Format for CSS (classes vs @layer rulesets).

SETTINGS

1. Unit mode: px or rem with custom base.
2. Typography style format: CSS classes or property blocks (when exporting to CSS).
3. Dark mode selector.
4. Font fallbacks.
5. Generate index.css files (root and per-folder).
6. Minification.

Perfect for design systems, component libraries, and any project that needs consistent tokens across design and code.