How styles compile

Stillwind compiles style() calls when your bundler builds the application. This page shows what the compiler generates, what JavaScript remains at runtime, and how the CSS reaches the page.

Static styles

A call with only static utilities and CSS variants compiles to an object literal:

Source

import { style } from "stillwind/react";

export const props = style("rounded-md p-4 text-blue-600 hover:text-blue-800 md:p-6");

Compiled code

export const props = {className:"sw_hk649"};

Generated CSS

.sw_hk649 {
  padding: calc(var(--spacing) * 4);
  color: var(--color-blue-600);
  border-radius: var(--radius-md);
}

@media (hover: hover) {
  .sw_hk649:hover {
    color: var(--color-blue-800);
  }
}

@media (width >= 48rem) {
  .sw_hk649 {
    padding: calc(var(--spacing) * 6);
  }
}

In this example, the utilities compile to one class. The browser applies hover: through a selector and md: through a media query. Both stay in CSS, so the compiled JavaScript contains only the class name.

Conditions and runtime values

A condition or a runtime value needs a small amount of JavaScript:

Source

import { style } from "stillwind/react";

declare const active: boolean;
declare const progress: number;
export const props = style("p-4", active && "bg-blue-500", { "--progress": progress });

Compiled code

import { stillwindClsx, stillwindCssValue } from "stillwind/runtime/class-name-object";

declare const active: boolean;
declare const progress: number;
export const props = {className:stillwindClsx("sw_zwy1n",(active) && ("sw_h7hj9")),style:{"--progress":stillwindCssValue(progress)}};

Generated CSS

.sw_zwy1n {
  padding: calc(var(--spacing) * 4);
}

.sw_h7hj9 {
  background-color: var(--color-blue-500);
}

The compiled call imports helpers to join the class names and pass the runtime custom property as an inline style.

The CSS for both classes is generated at build time. At runtime, the code only chooses class names and sets property values.

You write	JavaScript at runtime
Static utilities and variants	A class name
A condition, such as `active && "..."`	A helper that joins class names
A runtime custom property	An inline `style` value
`style.cva()`	A factory that selects compiled class names
`style.media()`	A string with the media query
`style.css()`	A CSS string that you place yourself

Development builds import checked versions of the helpers from stillwind/runtime/class-name-object-development. These versions report invalid values while you develop. Production builds use the unchecked helpers.

The generated stylesheet

The stylesheet contains utility CSS only for the style() calls that the build compiles. Utilities that no compiled call uses produce no CSS.

Stillwind fixes the precedence of its generated rules at build time. Class-name order and module-loading order do not change it. Production optimizations can combine or move rules without changing the cascade. See CSS ordering for base styles, conditions, and variants.

Delivering CSS to the page

The build integration adds the generated CSS to your application. For Vite and the frameworks built on it, the build writes one stylesheet by default. The Astro integration also adds the styles to server-rendered pages and islands. SvelteKit needs a server hook to add them to server-rendered pages in development. See Framework integrations for the setup of each framework.

style.css() returns its CSS as a string instead of adding it to this stylesheet. To add the styles of a module to a shadow root, see Web Components.