Skip to main content
The Tailwind export generates a theme.extend object that you can use in your tailwind.config.ts. It maps tokens to the correct Tailwind theme sections automatically.

​
Output format

// tailwind.config.ts
import type { Config } from "tailwindcss"

const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "var(--color-brand-primary)",
          secondary: "var(--color-brand-secondary)",
        },
        neutral: {
          50: "var(--color-neutral-50)",
          900: "var(--color-neutral-900)",
        },
      },
      spacing: {
        "page-gutter": "var(--spacing-page-gutter)",
        "card-padding": "var(--spacing-card-padding)",
      },
      borderRadius: {
        card: "var(--radius-card)",
      },
      fontSize: {
        body: "var(--font-size-body)",
        heading: "var(--font-size-heading)",
      },
      fontWeight: {
        bold: "var(--font-weight-bold)",
      },
      fontFamily: {
        sans: "var(--font-family-sans)",
      },
      boxShadow: {
        card: "var(--shadow-card)",
      },
      opacity: {
        disabled: "var(--opacity-disabled)",
      },
      transitionDuration: {
        fast: "var(--duration-fast)",
      },
      transitionTimingFunction: {
        "ease-out": "var(--easing-ease-out)",
      },
      zIndex: {
        modal: "var(--z-index-modal)",
      },
    },
  },
}

export default config

​
Token type mapping

Humic typeTailwind section
colorcolors
spacingspacing
radiusborderRadius
font.sizefontSize
font.weightfontWeight
font.familyfontFamily
font.lineHeightlineHeight
font.letterSpacingletterSpacing
shadowboxShadow
opacityopacity
durationtransitionDuration
easingtransitionTimingFunction
z-indexzIndex

​
How it works

The Tailwind export references CSS custom properties (var(--...)) rather than embedding raw values. This means:
  1. Dark mode works automatically — the CSS variables change when you switch data-theme, so Tailwind utilities adapt without extra configuration
  2. Single source of truth — values live in your CSS variables file, not duplicated in the Tailwind config
  3. Smaller config — the Tailwind config stays clean and readable

​
Usage

After exporting, use Tailwind classes as usual: 
<div class="bg-brand-primary p-card-padding rounded-card shadow-card">
  <h1 class="text-heading font-bold">Hello</h1>
</div>