Design tokens for Tailwind CSS

From token definitions to utility classes

Tailwind CSS is configured through a theme object — colors, spacing, typography, breakpoints. A designtoken.md file captures your complete design system in structured markdown that coding agents read natively, and the generator outputs Tailwind-compatible config. Your agent gets the semantic intent from the markdown and the exact values for Tailwind utility classes.

How it works

Token to utility class

Three steps: define tokens, generate config, build consistent UI.

Step 1

Token file → Agent context

Your designtoken.md defines full color scales (50–900), a typography hierarchy, spacing tokens, and component states. Any coding agent reads this as project context and understands your design system.

designtoken.md

Step 2

Generator → Tailwind config

The designtoken.md generator outputs Tailwind-compatible theme extensions. Your color scales map to colors.primary.500, typography to fontSize.heading-lg, spacing to spacing.md.

tailwind.config.ts

Step 3

Agent → Utility classes

With both the semantic markdown and Tailwind config in your project, the agent generates correct utility classes: bg-primary-500 hover:bg-primary-600 text-heading-lg px-md. Consistent, semantic, on-brand.

index.tsx

Side by side

With and without designtoken.md

See the difference in Tailwind config depth and agent capability.

tailwind.config.ts WITHOUT designtoken.md

Limited depth

theme: { extend: { colors: { primary: '#3B82F6', // Just one value secondary: '#8B5CF6', }, fontSize: { heading: '24px', body: '16px', } } }

tailwind.config.ts WITH designtoken.md

Full depth

theme: { extend: { colors: { primary: { 50: '#EFF6FF', 100: '#DBEAFE', 200: '#BFDBFE', 500: '#3B82F6', 600: '#2563EB', 700: '#1D4ED8', 900: '#1E3A8A', } }, fontSize: { 'display': ['48px', { lineHeight: '1.1', fontWeight: '700' }], 'heading-lg': ['36px', { lineHeight: '1.2', fontWeight: '700' }], 'body': ['16px', { lineHeight: '1.6', fontWeight: '400' }], 'caption': ['12px', { lineHeight: '1.4', fontWeight: '500' }], } } }

Works with

Compatible frameworks

designtoken.md integrates seamlessly with popular Tailwind ecosystems.

Tailwind v4

New CSS-first config. designtoken.md's CSS variable output maps directly to @theme.

Tailwind v3

Standard JS config. Generator outputs compatible theme extension.

shadcn/ui

Token values map to CSS variables that shadcn components consume.

DaisyUI

Theme tokens map to DaisyUI's theme configuration system.

FAQ

Common questions

Does designtoken.md generate a tailwind.config file?

The generator outputs Tailwind-compatible theme values alongside the markdown and other formats. You can copy these directly into your tailwind.config.ts or use the CSS variable output.

Does it work with Tailwind v4?

Yes. Tailwind v4's CSS-first configuration accepts CSS custom properties, which designtoken.md's generator outputs. The transition is seamless.

Can I use designtoken.md with shadcn/ui?

Yes. shadcn/ui uses CSS variables for theming. Your designtoken.md color scales map directly to the CSS variable structure shadcn expects.