CSS isolation

The package uses Tailwind CSS internally but must not leak styles into a host page. Four mechanisms keep it contained.

1. CSS Modules

Every component file is a .module.css file. Tailwind processes it, the build system hashes the class names, and the resulting stylesheet is scoped to the component. A host page's .button class cannot collide with the builder's .button class because the latter becomes .button_abc123 at build time.

2. PostCSS prefixing

The package's Tailwind config applies a bnb- prefix to every utility class. Even if a class name escaped the module hash, it would still be namespaced: bnb-bg-primary, not bg-primary.

3. Container queries

The renderer wraps the banner in a container and measures its own box. This is layout isolation, not style isolation, but it means the banner's responsive behaviour is independent of the host page's layout.

4. The bnb-root scope

The renderer and builder both put a bnb-root class on their root element. A small set of reset styles is applied inside this scope to neutralise common host-page defaults (margins on p, list styles on ul, etc.).

The one hole

Custom CSS variables (--bnbr-font-heading, --bnbr-font-body) are read from the host page's :root. This is intentional: the brand owns the typeface, the template owns everything else. If you do not set these variables, the package falls back to its bundled defaults.