Bug – Vapi widget injects Tailwind Preflight and overrides host-site fonts

[badereddineqodia]

Package / CDN: @vapi-ai/client-sdk-react (widget.umd.js)
Widget version: 0.6.0 (CDN at unpkg.com as of 2025-07-07)
Host platform: Odoo 16 Website
Browser: Chrome 124, Firefox 140

1️⃣ Steps to reproduce

1. Create a blank Odoo website page that uses the default Odoo theme (Poppins / Montserrat).

2. Paste the official snippet in a raw HTML block just before </body>: ```html

   <script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js" async></script>

   <vapi-widget
   public-key="p-k"
   assistant-id="a-i"
   mode="chat"
   size="full">
   

3. Reload the page.

2️⃣ Actual behaviour

• The body font switches from the theme font to the browser default sans-serif.

• All <h1>…<h6> elements lose their default sizes/weights (Tailwind Preflight sets them to inherit).

• Buttons/inputs get Tailwind style normalisations (border-radius removed, font family changed, etc.).

Inspecting the DOM shows a <style> tag injected by the widget that contains Tailwind v3 Preflight.
Because it is appended after Odoo’s asset bundles, its rules win the cascade and restyle the whole site.

---

3️⃣ Expected behaviour

Embedding the widget should not alter global typography or reset HTML elements on the host page.
All visual changes should be limited to the widget itself.

---

[woodybriggs]

this also affects utility styles too. I am using unocss with tailwind4 config and the utilities set by widget overrides mine. The best way to handle this imo is to put widget + styles into its own shadowroot. So that it can essentially be a sandbox for the widget. Or use some name mangling plugin for tailwind classes to to and effectivly put them in a seperate "namespace"

[bigboysuper6]

I temporarily solved this problem by adding prefixes to the Tailwind styles, code link