Styling and cascade layers

vael-ui ships in @layer ui-components. Unlayered CSS always wins over a layer regardless of specificity, so a plain, unlayered base reset silently overrides vael-ui internals. Fix: put your base styles in a layer too, ordered first.

/* your app's main stylesheet, e.g. style.css */
@layer app-base, ui-components;

@layer app-base {
  * { margin: 0; box-sizing: border-box; }
  button, input, textarea, select { font: inherit; }
}

// main.ts
import './style.css'        // your base layer, loads first
import 'vael-ui/style.css'  // now sorts after app-base

Two files, that's it. Import order here only controls layer position, nothing else, an unlayered override anywhere always still wins regardless of load order.

Deliberately overriding one component (ui prop, a Tailwind utility) wants your rule to win, keep that CSS unlayered as it already is by default. See Using with Tailwind.