How to make custom Web Components with Tailwind CSS react to container width instead of window.innerWidth? [closed]

I'm building an embedded widget as a Web Component using Vite + Tailwind CSS.

When the app runs standalone, Tailwind responsive breakpoints (sm, md, lg, xl) work correctly, because they react to window.innerWidth.

However, when the same app is embedded into another website, I control its width via the container:

But Tailwind still reacts to window.innerWidth instead of the Web Component container width.

This means:

• Browser width: 1500px -> Tailwind applies xl
• Web Component width: 500px -> Tailwind still applies xl, not sm or md

Example problem:

• Resizing the browser window triggers Tailwind breakpoints - OK
• Resizing only the embedded widget container does not - NOT OK

So the main problem is that Tailwind still reacts to window.innerWidth, not to the width of my web component container.

What I've tried so far

1. Container queries (only as a local workaround)

I tried adding container queries manually:

:host {
  display: block;
  container-type: inline-size;
}

@container (max-width: 1425px) {
  .someClass {
    bottom: 70px;
  }
}

It works, but this is clearly a workaround. I have a large codebase, and I don't want to replace all my Tailwind responsive classes with @container everywhere.

2. Tailwind container queries

I also tried Tailwind container queries like @container/max-xl:flex. But again, this would require massive refactoring across the entire application.

3. Wrapper container

I wrapped everything inside:

this.container = document.createElement("div");
this.container.classList.add(
  "embedded-wrapper", // <- this
  "flex",
  "h-full",
  "w-full",
  "flex-1",
  "justify-center"
);

.embedded-wrapper {
  container-type: inline-size;
}

But Tailwind still keeps reacting only to window.innerWidth.

4. Overriding window.innerWidth (hack attempt)

I even tried to override window.innerWidth:

private overrideWindowInnerWidth() {
  const containerWidth = this.container.clientWidth;

  Object.defineProperty(window, "innerWidth", {
    configurable: true,
    get() {
      return containerWidth; // also tried hardcoded values,
      // because as I can see in the browser console, the value is 0
    }
  });
}

But that didn't work either - Tailwind breakpoints were still based on the real window width.

I’m trying to understand if:

1. This is fundamentally impossible due to how Tailwind media queries work
2. There is a known approach / architecture pattern for this case
3. Or if there is some Tailwind-specific solution for embedded components

To make the problem easier to reproduce, I've created a minimal example repository: https://github.com/pruchay/tailwind-embedded-width-issue