@theme

@theme [default] [asset] [inline | static] {
  --name: value;
}

@theme defines design tokens as custom properties. A token in a known namespace adds utilities: --color-brand adds bg-brand, text-brand, and the other color utilities. Write @theme at the top level of the stylesheet.

Example

@theme {
  --color-brand: oklch(0.6 0.2 250);
  --color-brand-muted: oklch(0.8 0.08 250);
  --radius-card: 0.75rem;
}

import { style } from "stillwind/react";

export const card = style("rounded-card bg-brand");

export const card = {className:"sw_j7rat"};

/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer theme {
  :root, :host {
    --color-brand: oklch(60% .2 250);
    --radius-card: .75rem;
  }
}

@layer utilities {
  .sw_j7rat {
    background-color: var(--color-brand);
    border-radius: var(--radius-card);
  }
}

The generated stylesheet declares only the tokens that the used utilities reference. --color-brand-muted is not used, so the stylesheet leaves it out.

Options

inline and static cannot be combined. The other options can be combined freely.

Defaults

@theme {
  --color-brand: red;
}

@theme default {
  --color-brand: blue;
  --color-brand-muted: lightblue;
}

import { style } from "stillwind/react";

export const label = style("bg-brand text-brand-muted");

export const label = {className:"sw_4zrwj"};

/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer theme {
  :root, :host {
    --color-brand: red;
    --color-brand-muted: lightblue;
  }
}

@layer utilities {
  .sw_4zrwj {
    color: var(--color-brand-muted);
    background-color: var(--color-brand);
  }
}

--color-brand without default wins although it comes first. The default theme of Stillwind uses default, so your tokens replace its values.

Inline and static values

@theme inline {
  --font-display: "Inter Display", sans-serif;
}

@theme static {
  --color-highlight: #fde047;
}

import { style } from "stillwind/react";

export const title = style("font-display");

export const title = {className:"sw_mjcfr"};

/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer theme {
  :root, :host {
    --color-highlight: #fde047;
  }
}

@layer utilities {
  .sw_mjcfr {
    font-family: Inter Display, sans-serif;
  }
}

font-display contains the value of --font-display instead of a var() reference, and the stylesheet does not declare --font-display. The stylesheet declares --color-highlight, although no utility uses it, so your own CSS can reference it.

Assets

@theme asset {
  --image-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

@utility checkmark {
  mask-image: var(--image-check);
}

import { style } from "stillwind/react";

export const done = style("checkmark");

export const done = {className:"sw_j94hj"};

/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer theme {
  :root, :host {
    --image-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  }
}

@layer utilities {
  .sw_j94hj {
    mask-image: var(--image-check);
  }
}

An asset is declared when a used rule references it, like a token. An asset adds no utilities. Token restrictions, --value() patterns, theme(), and --theme() do not see assets.

Remove tokens

Set a namespace to initial to remove its earlier tokens. --*: initial removes every token.

@theme {
  --color-*: initial;
  --color-ink: #1f2937;
  --color-paper: #ffffff;
}

import { style } from "stillwind/react";

export const page = style("bg-paper text-ink");

export const page = {className:"sw_rjnyv"};

/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;

@layer theme {
  :root, :host {
    --color-ink: #1f2937;
    --color-paper: #fff;
  }
}

@layer utilities {
  .sw_rjnyv {
    color: var(--color-ink);
    background-color: var(--color-paper);
  }
}

After this block, palette utilities such as bg-red-500 are unknown.

A reset affects only tokens of the same kind: @theme { --*: initial; } keeps assets, and @theme asset { --*: initial; } keeps design tokens.

Placement

The theme slot places the declarations. @import "stillwind" puts it on :root, :host. See @stillwind-slot.

incompatible-theme-value reports a token with a value of the wrong type for its namespace, such as a length in --color-*. Design systems shows how to name tokens by role and report values outside them.