# Styling (/apps/styling)

Compile CSS locally with `compileUiStyles` from `@poltura/cli/ui-styles`. The registry never runs Tailwind. Hosted iframe pages use `@poltura/app-ui/dom` and `--poltura-*` variables instead of this pipeline.



```css
@theme {
  --color-offer-highlight: #fef3c7;
}

@utility offer-panel {
  border-width: 1px;
}
```

`compileUiStyles({ input, candidates?, minify? })` returns `css`, UTF-8 `bytes`, SRI `digest`, `byteLength`, `mediaType: 'text/css'`. Empty output and output above the 262144-byte stylesheet limit fail. Use complete class names in source. Supply `candidates` when scanning cannot see a class.

The CLI sets `stylesheet.inheritTheme` from `workers[].inheritTheme` (default true) and writes one `styles/app.css` when workers share a source. `inheritTheme: true` projects host colors, fonts, radii, shadows, and spacing roles into the style document. Importing `theme.css` alone does not enable inheritance.

`stylesheet.themeSettings` is optional: up to 16 unique keys. A key is at most 64 characters, lower snake_case segments optionally joined by dots. Values are `string` \| `number` \| `boolean`; string values are at most 2000 characters. The whole appearance JSON is at most 8192 bytes.

`useTheme()` returns optional `UiAppearance`: `version` (currently 1), `mode` `light` \| `dark`, semantic `tokens`, optional `theme: { handle, version? }`, optional declared `settings`. Missing keys are omitted. Admin hosts need not expose storefront theme settings.

`className` on primitives is max 2048 characters without control characters. Responsive variants use the visible mount viewport. `dark:` follows host mode. App CSS cannot `url(...)` a font or remote `@import`. Remote resources and script in compiled CSS are blocked. Changing CSS, inheritance, or declared theme settings requires a new reviewed release.

Aliases from `theme.css` when inheritance is on: `bg-background`, `text-foreground`, `bg-surface`, `bg-primary`, `text-on-primary`, `border-border`, `font-body`, `font-display`, `rounded-theme`, `shadow-theme-card`, `gap-theme-4`. Standard Tailwind scales remain. Breakpoints are Tailwind's, not merchant breakpoints.