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 resources/scss/brand.scss (see Customize with SCSS), and imported by resources/css/engines/tailwind.css.
Template-specific styles live in resources/css/orbix.css and resources/css/orbix/ and use design tokens only (var(--fd-…)), so they follow the theme, the dark mode and the text direction automatically.
config/orbix.php declares the engine ('engine' => 'tailwind') and the Blade head loads public/build/tailwind.

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:

/* resources/css/orbix/pages/reports.css (import it from resources/css/orbix.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 run npm run build (or keep npm run dev running). Inline style="" attributes 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 resources/scss/brand.scss (Customize with SCSS).