style.css()

style.css(...rules, options?) compiles utilities into a CSS string. Unlike style(), it adds nothing to the page’s stylesheet. You decide where the string goes, such as a shadow root.

Example

import { style } from "stillwind/react";

export const css = style.css("p-4 text-blue-600", {
  selector: ":host",
});

export const css = "/*! stillwind v0.0.0 | MIT License | https://stillwind.dev */\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n:where(:root, :host){--color-blue-600:oklch(54.6% 0.245 262.881);--spacing:0.25rem;}:host{padding:calc(var(--spacing) * 4);}:host{color:var(--color-blue-600);}";

Inputs

rules accepts utility strings, arrays, objects with variant keys, and false, null, or undefined. All of them must be known at build time. Runtime conditions, refs, class fields, custom properties, and stored style() results are not accepted, and invalid-css-input reports them.

The last argument can be an options object literal:

A variant that sets its own selector, such as host: or [button]:, keeps that selector. A utility without selector and without such a variant produces no CSS, and missing-document-target reports it.

Output

The compiler replaces the call with a string literal at build time. No CSS compiler runs in the browser.

The string contains the theme values, keyframes, and other supporting CSS that the template and the utilities need. It never contains the preflight reset.

Add the string to the page yourself, for example with CSSStyleSheet.replaceSync() and a shadow root’s adoptedStyleSheets. The results in Built-in utilities leave out the supporting CSS, so they cannot replace this string.

To add all styles of a module to a shadow root, including the preflight reset, import them from stillwind/module-css instead. See Web Components.