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

# Integrating Livry with Tailwind CSS v4

> Map Livry's custom properties onto Tailwind v4 theme namespaces with @theme inline reference, so every utility rebrands when the stylesheet changes.

Tailwind v4 generates utilities from theme variables. Point those variables at Livry's custom
properties and **every utility in your app rebrands when the stylesheet changes.**

**Theme integration required:** a pair whose library is `Tailwind CSS`. It builds `tokens.css`.

## 1. Link the stylesheet

```html theme={null}
<link id="livry" rel="stylesheet"
      href="https://cdn.livry.dev/{environmentID}/{themeID}/{variantID}/latest/tokens.css">
```

Before your own CSS — see [Plain CSS](/guides/plain-css).

## 2. Map the variables

```css theme={null}
/* app.css */
@import "tailwindcss";

@theme inline reference {
  --color-brand-primary: var(--color-brand-primary, #5B4DE4);
  --color-brand-hover:   var(--color-brand-hover, #4E3EC9);
  --color-surface:       var(--color-surface, #FFFFFF);

  --spacing-md:          var(--space-md, 12px);
  --radius-md:           var(--radius-md, 6px);
  --font-body:           var(--font-body, system-ui);
}
```

The left-hand names are **Tailwind's** and yours to choose; the right-hand ones come from Livry's
stylesheet.

<Warning>
  **`inline reference` — both keywords, and both load-bearing.**

  **`reference`**, because the names collide. Livry's `--color-brand-primary` and Tailwind's theme
  variable of the same name are the same CSS custom property. A plain `@theme` would emit Tailwind's
  own `:root { --color-brand-primary: var(--color-brand-primary) }` — a cycle, which CSS resolves to
  the property being invalid, and depending on stylesheet order it would blank Livry's value too.
  `reference` registers the variable for utility generation **without emitting it**, so nothing
  shadows the stylesheet.

  **`inline`**, because the value must travel. It makes each utility carry the value written here —
  `var(--color-brand-primary, #5B4DE4)` — rather than a reference to Tailwind's copy. That is what
  makes swapping Livry's stylesheet rebrand every utility.

  Verified against **tailwindcss 4.3.3**: `@theme` options are independent bit flags, so the two
  combine. If you are on an older 4.x, check that your build honours both before shipping.
</Warning>

## 3. Use the utilities

```tsx theme={null}
export const Button = () => (
  <button className="bg-brand-primary hover:bg-brand-hover rounded-md px-4 py-2">
    Save
  </button>
);
```

Nothing here names a colour. Swap the stylesheet and the button restyles.

<CodeGroup>
  ```html Vue theme={null}
  <template>
    <button class="bg-brand-primary rounded-md px-4 py-2">Save</button>
  </template>
  ```

  ```html Svelte theme={null}
  <button class="bg-brand-primary rounded-md px-4 py-2">Save</button>
  ```

  ```ts Angular theme={null}
  @Component({
    selector: "app-button",
    template: `<button class="bg-brand-primary rounded-md px-4 py-2">Save</button>`,
  })
  export class ButtonComponent {}
  ```
</CodeGroup>

## Which namespace a token belongs in

Tailwind's theme namespaces decide which utilities get generated. The useful mapping:

| Your tokens | Namespace | Generates |
| - | - | - |
| Colours | `--color-*` | `bg-`, `text-`, `border-`, `ring-`… |
| Spacing | `--spacing-*` | `p-`, `m-`, `gap-`… |
| Radii | `--radius-*` | `rounded-` |
| Font families | `--font-*` | `font-` |
| Font sizes | `--text-*` | `text-` |
| Font weights | `--font-weight-*` | `font-` |
| Line heights | `--leading-*` | `leading-` |
| Letter spacing | `--tracking-*` | `tracking-` |
| Shadows | `--shadow-*` | `shadow-` |
| Easings | `--ease-*` | `ease-` |

<Note>
  **Tailwind has no namespace for several token categories** — sizes, durations, gradients, borders,
  border widths, z-index and opacity among them.

  Those tokens are still in `tokens.css` and still usable; you just reference them directly with
  `var()` in arbitrary values rather than getting a utility:

  ```html theme={null}
  <div class="z-[var(--z-index-modal)] duration-[var(--duration-fast)]">
  ```
</Note>

## Generate the mapping

Writing this by hand for 400 tokens is not the plan. The portal's **Integration** tab generates the
whole `@theme` block from your actual Theme, categorised and pre-filled, and lists any category
Tailwind has no namespace for rather than dropping it silently.

Copy it once, then edit freely — which Tailwind name each variable becomes is your naming decision,
and it **stays right for every Variant**, because a Variant changes values and never names.

## Switching brands

Exactly as [Plain CSS](/guides/plain-css): change the `href`, and every generated utility recomputes
with no re-render and no rebuild.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.