Developers
Start building
Apps/Styling

Styling

Tailwind compile, inheritTheme, themeSettings, useTheme, and isolation limits for native public apps.

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.

@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.

Last updated