Stillwind’s API consists of macros: functions that the compiler replaces with generated code at build time. Each page lists the inputs that the macro accepts, and it shows the generated JavaScript and CSS for its examples.
| Macro | Use it to | Guide |
|---|---|---|
| style() | Style an element | The basics of style() |
| style.ref() | Style an element from another element’s state, size, or position | Element relationships |
| style.anchorScope() | Limit where an anchor name is visible | Element relationships |
| style.keyframes() | Define an animation in a component | Animations |
| style.viewTransition() | Style view transition snapshots and name each item | View transitions |
| style.media() | Use a named breakpoint as a media query in JavaScript | Responsive styles |
| style.css() | Compile utilities into a CSS string for a shadow root | Web Components |
| style.cva() | Migrate components that use cva |
Migrating from Tailwind CSS |
Import the macros from the entrypoint of your framework, such as
stillwind/react. The examples on these pages use React.
Each example shows the source, the compiled code, and the CSS that it adds to the stylesheet. In development, Stillwind also adds checks that report invalid values at runtime. The compiled code on these pages leaves them out. How styles compile explains the generated code in general.