Cascade Layers

Every rule in the design system's CSS sits in one of four cascade layers:

@layer apui.reset, apui.tokens, apui.components, apui.utilities;

Why your CSS always wins

CSS that isn't in a layer beats every layered rule, whatever its specificity or load order. So any plain rule you write overrides a token, a component style or a utility:

/* No !important, no specificity tricks */
.apui-card {
  border-radius: 4px;
}

Within the design system, later layers win over earlier ones regardless of specificity: a utility beats a component rule, and a component rule beats the reset. The design system itself never uses !important.

Your own layers

If your app uses layers of its own, declare where the design system goes, before you import any CSS. A layer's position is fixed the first time it appears, so this line has to come before the design system's stylesheet loads. Layers declared earlier lose to layers declared later:

@layer reset, apui, app;

Here your app layer wins over the whole design system, and your reset loses to it. Unlayered CSS still beats both.

With Tailwind

Tailwind v4 also uses cascade layers. Put the design system between Tailwind's base and components:

@layer theme, base, apui, components, utilities;

Tailwind's Preflight then never restyles a component, and a Tailwind utility on a component still wins. See With Tailwind.