Styling

Every Tailwind utility class must be prefixed with tw:. A class written without the prefix is not Tailwind and silently does nothing — the most common first mistake.

Overriding styles

Pass className to layer additional Tailwind utilities on top of a component’s defaults:

<Button className="tw:w-full">Submit</Button>

Colors and tokens

Falcon’s theme is exposed as Tailwind utilities backed by design tokens. Reach for those token-backed utilities rather than raw hex or rgb values so components stay consistent with the rest of the design system.

Font family

Falcon loads its own font (from Google Fonts) and applies it (tw:font-sans) only where a surface is composed entirely of Falcon components: AppHeader, Sidebar, and every portalled surface (dialogs, sheets, drawers, popovers, dropdowns, selects, comboboxes, hover cards, tooltips, toasts). Those render in the Falcon font even when the host app sets its own.

AppLayout and AppLayoutMain deliberately do not set the font: page content may still be built from legacy components that must keep the host app’s font. Don’t add a font class there.

Components rendered inside a surface that already sets the font inherit it — don’t add a font class to them. A layout or root component of your own that renders outside those surfaces needs tw:font-sans on its root.