CSS engine: Tailwind CSS

This item is the Tailwind CSS edition of Orbix. Its styles are the Orbix design system compiled on a Tailwind CSS v4 base, and every page uses the same fd-* component markup.

The engine stylesheet is compiled from the SCSS sources of the bundled design system package (packages/foundry-ui) by npm run build, with your settings in src/scss/brand.scss (see Customize with SCSS), and imported by src/styles/engines/tailwind.css, which nuxt.config.ts loads first (css, ORBIX_ENGINE=tailwind in the build).
Template-specific styles live in src/styles/index.css and src/styles/orbix/ and use design tokens only (var(--fd-…)), so they follow the theme, the dark mode and the text direction automatically.
<html data-engine="tailwind"> marks the engine in every generated page.

Orbix is also available as a separate item built on Bootstrap 5, with the same pages and the same markup. The SCSS sources of both engines are included; Customize with SCSS explains how to compile the other one. Each item documents and supports its own engine.

Writing your own styles

Use the design tokens instead of fixed values, and logical properties instead of left/right, so your styles work in light and dark mode and in right-to-left languages:

/* src/styles/reports.css (import it from src/styles/index.css) */
.reports-summary {
  padding-block: var(--fd-space-4);
  padding-inline: var(--fd-space-5);
  border: var(--fd-border-width) solid var(--fd-border);
  border-radius: var(--fd-radius-surface);
  background: var(--fd-surface);
  color: var(--fd-text);
}

Then use the class in your component (<div class="reports-summary">). Inline style attributes and bindings are not used anywhere in the template, and the test suite checks it: keep styles in CSS files.

Useful tokens

Token	Use
`--fd-primary`, `--fd-on-primary`, `--fd-primary-subtle`	Brand color, its readable text color and a soft tint
`--fd-bg`, `--fd-surface`, `--fd-surface-raised`, `--fd-surface-sunken`	Backgrounds
`--fd-text`, `--fd-text-muted`, `--fd-text-subtle`	Text colors
`--fd-border`, `--fd-border-strong`, `--fd-border-width`	Borders and dividers
`--fd-success`, `--fd-warning`, `--fd-danger`, `--fd-info` (plus `-subtle` and `-text` variants)	Status colors
`--fd-space-1` … `--fd-space-32`, `--fd-stack-gap`	Spacing scale (follows the density setting)
`--fd-radius-control`, `--fd-radius-surface`, `--fd-radius-pill`	Corner radius (follows the radius setting)
`--fd-font-sans`, `--fd-font-mono`, `--fd-text-sm` … `--fd-text-3xl`	Typography
`--fd-chart-1` … `--fd-chart-6`	Chart palette derived from the brand color

The full list of tokens is in packages/foundry-ui/dist/tokens/orbix.css (and in packages/foundry-ui/scss/tokens/_orbix-properties.scss). To change them for the whole application, use $tokens in src/scss/brand.scss (Customize with SCSS).