Style Overrides

User-supplied classes always override component base classes — guaranteed by CSS Cascade Layers. No runtime JS, no merge functions, no class-order concerns.

Styles in a named @layer lose to un-layered styles regardless of specificity. BarefootJS puts component base classes into @layer components:

@layer preflights, base, shortcuts, components, default;

The compiler's cssLayerPrefix option prefixes base classes at compile time:

// Source
const baseClasses = 'inline-flex items-center bg-primary text-primary-foreground'

// Compiled (cssLayerPrefix: 'components')
const baseClasses = 'layer-components:inline-flex layer-components:items-center layer-components:bg-primary layer-components:text-primary-foreground'

User classes remain un-layered and always win:

<Button className="bg-red-500">

  layer-components:bg-primary     → @layer components  (lower priority)
  bg-red-500                      → un-layered          (higher priority)

Result: bg-red-500 wins.

Zero runtime cost. Prefixing applies to the IR, so all adapters benefit.