> ## Documentation Index
> Fetch the complete documentation index at: https://docs.humic.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind

> Export design tokens as a Tailwind CSS theme configuration.

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

```typescript theme={null}
// 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 type           | Tailwind section           |
| -------------------- | -------------------------- |
| `color`              | `colors`                   |
| `spacing`            | `spacing`                  |
| `radius`             | `borderRadius`             |
| `font.size`          | `fontSize`                 |
| `font.weight`        | `fontWeight`               |
| `font.family`        | `fontFamily`               |
| `font.lineHeight`    | `lineHeight`               |
| `font.letterSpacing` | `letterSpacing`            |
| `shadow`             | `boxShadow`                |
| `opacity`            | `opacity`                  |
| `duration`           | `transitionDuration`       |
| `easing`             | `transitionTimingFunction` |
| `z-index`            | `zIndex`                   |

## 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:

```html theme={null}
<div class="bg-brand-primary p-card-padding rounded-card shadow-card">
  <h1 class="text-heading font-bold">Hello</h1>
</div>
```