---
title: "@stillwind-css-template"
description: "Define where style.css() places its utilities, theme values, and other supporting CSS."
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.

# @stillwind-css-template

```css
@stillwind-css-template name {
  ...
  @stillwind-slot utilities;
}
```

`@stillwind-css-template` defines a template for the string that
[style.css()](/docs/macros/css) returns. The `template` option of the call
selects the template by name, and `default` applies when the call names none.
Write it at the top level of the stylesheet.

## Example

### Stylesheet

```css
@stillwind-css-template layered {
  @layer component {
    :host {
      @stillwind-slot theme;
    }

    @stillwind-slot utilities;
  }
}
```

### Source

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

export const css = style.css("p-4 text-blue-600", {
  selector: ":host",
  template: "layered",
});
```

### Compiled code

```ts
export const css = "/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer component{:host{--color-blue-600:oklch(54.6% 0.245 262.881);--spacing:0.25rem;}:host{padding:calc(var(--spacing) * 4);}:host{color:var(--color-blue-600);}}";
```

The string contains the template's own CSS, and each slot receives the output of
the call. The string never contains the preflight reset or the other rules of
your stylesheet.

## Leave out supporting CSS

A slot that the template omits drops its output. This template places only the
utilities, so the string uses `--spacing` and `--color-blue-600` without
declaring them. The page or the shadow root must declare them in another way.

### Stylesheet

```css
@stillwind-css-template bare {
  @stillwind-slot utilities;
}
```

### Source

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

export const css = style.css("p-4 text-blue-600", {
  selector: ":host",
  template: "bare",
});
```

### Compiled code

```ts
export const css = "/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n:host{padding:calc(var(--spacing) * 4);}:host{color:var(--color-blue-600);}";
```

## The default template

`@import "stillwind"` defines `default`:

```css
@stillwind-css-template default {
  :where(:root, :host) {
    @stillwind-slot theme;
    @stillwind-slot property-initials inherited;
  }

  :where(*, :host),
  ::before,
  ::after,
  ::backdrop {
    @stillwind-slot property-initials non-inherited;
  }

  @stillwind-slot keyframes;
  @stillwind-slot utilities;
}
```

It places the theme values on the root of the tree that adopts the string. It
emits no `@property` rules, because a registration inside a shadow root has no
effect. No rule is in a layer.

A later template with the same name replaces an earlier one, so your stylesheet
can redefine `default` after `@import "stillwind"`.

## Rules

- A template must contain a `utilities` slot.
- A template cannot contain definitions, such as `@theme` or `@utility`.
- The loader skips a template that breaks these rules, and
  [invalid-css-directive](/docs/lints/invalid-css-directive) reports it.
- A template name that the stylesheet does not define reports
  [invalid-css-input](/docs/lints/invalid-css-input) at the call. The call then
  uses no template, and its string contains only the rules.

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