Kit CSS in low cascade @layer; consumer base button/input resets override the modal

[jayeshbhole]

Summary

The kit's modal styles ship inside Tailwind @layer rules. Unlayered CSS always beats layered CSS regardless of specificity, so a consumer's plain button {} / input {} base reset silently overrides the kit's auth modal.

Details

wallet-react-kit ships Tailwind v4, so all of its styles live in @layer (theme / base / utilities). A host app's bare element selectors are unlayered and therefore outrank every kit layered utility.

Reproduction

1. Import the kit and render <AuthFlow>.
2. In the app's CSS add an ordinary reset:

   button { padding: 12px; border-radius: 8px; }
   input  { width: 100%; }

3. Open the auth modal. Its buttons/inputs are restyled by the host rules — the Google button label is squished, the email button renders empty, the close button becomes a solid box.

Consumer-side fix is to scope the reset (.app button {}) or wrap it in a layer, but that's a trap every integrator hits.

Ask

Make the kit's styles robust to host base resets. Options:

1. Render the modal in a Shadow DOM for full isolation.
2. Scope kit styles under a root class and ship them unlayered (or in a high layer) so consumer base resets can't outrank them.
3. Apply an explicit defensive reset on the kit's own elements.

Styles that must win should not sit in the lowest cascade layer.

Environment

@zerodev/wallet-react-kit@0.0.1-alpha.3, Tailwind v4, web (Vite + React 19).