---
title: "@theme"
description: "Define design tokens that add utilities, and shared values such as images."
image: "https://stillwind.dev/og.png"
---

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

# @theme

```css
@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

### Stylesheet

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

### Source

```tsx
import { style } from "stillwind/react";

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

### Compiled code

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

### Generated stylesheet without preflight

```css
/*! 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

| Option    | Effect                                                                              |
| --------- | ----------------------------------------------------------------------------------- |
| `default` | Marks the tokens as defaults. A token without `default` replaces them in any order. |
| `asset`   | Declares shared values, such as images, that are not design tokens                  |
| `inline`  | Replaces each `var()` reference to a token with the token's value                   |
| `static`  | Declares the tokens even when no used utility references them                       |

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

### Defaults

### Stylesheet

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

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

### Source

```tsx
import { style } from "stillwind/react";

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

### Compiled code

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

### Generated stylesheet without preflight

```css
/*! 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

### Stylesheet

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

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

### Source

```tsx
import { style } from "stillwind/react";

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

### Compiled code

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

### Generated stylesheet without preflight

```css
/*! 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

### Stylesheet

```css
@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);
}
```

### Source

```tsx
import { style } from "stillwind/react";

export const done = style("checkmark");
```

### Compiled code

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

### Generated stylesheet without preflight

```css
/*! 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.

### Stylesheet

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

### Source

```tsx
import { style } from "stillwind/react";

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

### Compiled code

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

### Generated stylesheet without preflight

```css
/*! 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](/docs/at-rules/stillwind-slot).

[incompatible-theme-value](/docs/lints/incompatible-theme-value) reports a token
with a value of the wrong type for its namespace, such as a length in
`--color-*`. [Design systems](/docs/guides/design-systems) shows how to name
tokens by role and report values outside them.

Source: https://stillwind.dev/docs/at-rules/theme/index.mdx