At-rule reference | Stillwind

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	Define design tokens and shared values	Tailwind
@utility	Define a utility or add declarations to an existing one	Tailwind
@custom-variant	Define a variant	Tailwind
@slot	Mark where a variant definition inserts the styled content	Tailwind
@plugin	Load a Stillwind or Tailwind CSS v4 plugin	Tailwind
@stillwind-property	Register a custom property that utilities need	Stillwind
@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	Insert the declarations of utilities into a rule	Tailwind
@variant	Apply variants, such as `hover` or `dark`, to a block	Tailwind

Place the generated CSS

At-rule	Use it to	Origin
@stillwind-slot	Place generated utilities, theme values, and other CSS	Stillwind
@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	Remove built-in or plugin utilities	Stillwind
@stillwind-undef-variant	Remove built-in or plugin variants	Stillwind
@stillwind-undef-arbitrary-property	Reject arbitrary properties such as `[color:red]`	Stillwind
@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, 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 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 reports the skipped statement.