VapiAI/client-sdk-react

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

Closed this issue · 3 comments

badereddineqodia commented

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 commented

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 commented

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

  • 👍1
arvindrk commented

Appreciate the PR @bigboysuper6! Instead of updating all the classes to have vapi- prefix, all the CSS can be selector scoped. This issue should be fixed by this PR

  • 🚀2