Skip to content

@stillwind-registry

Define or remove utilities only for style(), keyframes, animation options, or view transitions.

View as Markdown 
@stillwind-registry default, keyframe, animation, view-transition {
  ...
}

Each place where utilities are written resolves them with its own set of definitions, called a registry. @stillwind-registry selects the registries that the definitions inside the block change. Write it at the top level of the stylesheet, or inside another @stillwind-registry block.

Registry Resolves the utilities of
default style(), style.cva(), style.css(), and @apply
keyframe The frames of style.keyframes()
animation The options of a keyframes use, such as enter("both")
view-transition The group, old, new, and imagePair fields of style.viewTransition()

A definition outside every block changes default, keyframe, and view-transition. animation starts empty and changes only through blocks that name it.

Example

The built-in keyframe and view-transition registries replace duration-* with definitions that set animation properties. A top-level @utility with a name that they replace also reaches those registries, and bypassed-undefinition reports it. A default block keeps the definition out of them:

Stylesheet

@stillwind-registry default {
  @utility duration-slow {
    transition-duration: 600ms;
  }
}

Source

import { style } from "stillwind/react";

export const panel = style("transition duration-slow");

Compiled code

export const panel = {className:"sw_2wahw"};

Generated stylesheet without preflight

/*! 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 {
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer utilities {
  .sw_2wahw {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-duration: .6s;
  }
}

A block that names animation and view-transition defines the utility for animations instead:

@stillwind-registry animation, view-transition {
  @utility duration-slow {
    animation-duration: 600ms;
  }
}

Contents

A block contains only these statements. Another statement is an error.

The header names one or more registries, separated by commas. An unknown or missing name is an error, and invalid-css-directive reports it.

Animations and View transitions show how utilities such as duration-300 set animation properties in those registries.