---
title: "At-rule reference"
description: "Find the at-rules that define tokens, utilities, and variants in your stylesheet, and read their syntax and output."
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.

# At-rule reference

Your stylesheet defines the design system that `style()` uses. Besides ordinary
CSS, it can contain at-rules that define tokens, utilities, and variants, and
at-rules that control where the generated CSS goes. Some of them come from
Tailwind CSS v4, and Stillwind evaluates them with its own rules. The others
start with `@stillwind-`.

Each page shows the syntax of an at-rule and examples. An example shows the
stylesheet, the source that uses it, and the complete generated stylesheet. The
generated stylesheet on these pages leaves out the preflight reset.

## Define the design system

| At-rule                                                                      | Use it to                                                     | Origin    |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------- | --------- |
| [@theme](/docs/at-rules/theme)                                               | Define design tokens and shared values                        | Tailwind  |
| [@utility](/docs/at-rules/utility)                                           | Define a utility or add declarations to an existing one       | Tailwind  |
| [@custom-variant](/docs/at-rules/custom-variant)                             | Define a variant                                              | Tailwind  |
| [@slot](/docs/at-rules/slot)                                                 | Mark where a variant definition inserts the styled content    | Tailwind  |
| [@plugin](/docs/at-rules/plugin)                                             | Load a Stillwind or Tailwind CSS v4 plugin                    | Tailwind  |
| [@stillwind-property](/docs/at-rules/stillwind-property)                     | Register a custom property that utilities need                | Stillwind |
| [@stillwind-require-properties](/docs/at-rules/stillwind-require-properties) | Declare the registered custom properties that a utility needs | Stillwind |

## Use utilities in your own rules

| At-rule                            | Use it to                                             | Origin   |
| ---------------------------------- | ----------------------------------------------------- | -------- |
| [@apply](/docs/at-rules/apply)     | Insert the declarations of utilities into a rule      | Tailwind |
| [@variant](/docs/at-rules/variant) | Apply variants, such as `hover` or `dark`, to a block | Tailwind |

## Place the generated CSS

| At-rule                                                          | Use it to                                              | Origin    |
| ---------------------------------------------------------------- | ------------------------------------------------------ | --------- |
| [@stillwind-slot](/docs/at-rules/stillwind-slot)                 | Place generated utilities, theme values, and other CSS | Stillwind |
| [@stillwind-css-template](/docs/at-rules/stillwind-css-template) | Define the output of `style.css()`                     | Stillwind |

`@import "stillwind"` already places every slot. Use these at-rules when you
write your own entry stylesheet or change the output of `style.css()`.

## Remove or limit definitions

| At-rule                                                                                  | Use it to                                                | Origin    |
| ---------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------- |
| [@stillwind-undef-utility](/docs/at-rules/stillwind-undef-utility)                       | Remove built-in or plugin utilities                      | Stillwind |
| [@stillwind-undef-variant](/docs/at-rules/stillwind-undef-variant)                       | Remove built-in or plugin variants                       | Stillwind |
| [@stillwind-undef-arbitrary-property](/docs/at-rules/stillwind-undef-arbitrary-property) | Reject arbitrary properties such as `[color:red]`        | Stillwind |
| [@stillwind-registry](/docs/at-rules/stillwind-registry)                                 | Change definitions only in keyframes or view transitions | Stillwind |

## Write a utility library

Stillwind's built-in utilities and variants use
[registry directives](/docs/at-rules/registry-directives), such as
`@stillwind-utility` and `@stillwind-theme-namespace`. Read them when you write
a utility library or read the built-in definitions. Application stylesheets
normally do not need them.

## Tailwind CSS features that Stillwind ignores

Stillwind reads its settings from `stillwind.config.ts` and generates utilities
only from `style()` calls. It ignores `@config`, `@source`, `@reference`, the
`important`, `source`, and `prefix` modifiers of `@import`, and the `prefix()`
option of `@theme`. [ignored-tailwind-feature](/docs/lints/ignored-tailwind-feature)
reports them.

When the loader cannot use a Stillwind at-rule, it skips the statement and
compiles the rest of the stylesheet.
[invalid-css-directive](/docs/lints/invalid-css-directive) reports the skipped
statement.

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