---
title: "How styles compile"
description: "See what Stillwind generates at build time, what JavaScript remains at runtime, and how CSS reaches the page."
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.

# 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

```tsx
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

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

### Generated CSS


```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

```tsx
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

```ts
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


```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()`](/docs/macros/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](/docs/concepts/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](/docs/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](/docs/guides/web-components).

Source: https://stillwind.dev/docs/concepts/how-styles-compile/index.mdx