Using Flowbite within an Extension Project using iFrames

[schenktobi]

Hi together,

I am really frustrated with using flowbite and Tailwind together in my Project I am working on currently. I am developing a Chrome Extension, which injects an iFRame into some Pages, which are matched by the content-script of the Extension.

I cannot use Tailwinds Base Layer since that for some reason screws up other web pages, probably because I am injecting the styles via the iFrame, even when i disable the preflight this happens. For Example the search bar colors of github's search are messed up, when the Extension is present with the base layer activated.

On Top of that I cannot seem to get flowbite Tooltips to work. I think I tried everything including enabling the Tailwind Base Layer and initialising flowbite/the tooltips with initFlowbite() or initTooltips(). I even tried to use flowbite-vue's Components, but I cant get them to work either, which is just really weird to me.

By inspecting the html and css I coulnd't really figure out what was going wrong.

Since the Project is a Chrome Extension and I cannot share the full code, because it is a private repository from the company I work for, it is really hard to give a reproducible Example, but I can try to provide as much Information as possible if asked for.

I would we really greatfull for any suggestions and tips how to find out what's going wrong here.

Thanks in advance:D

[schenktobi]

FYI: I asked in the tailwind Community, if it correct, that I cant use the ring-utility without the base layer and there I got told that there are some Interactions with Flowbite and Tailwind, which I couldn't find any documentation about. Maybe the two Problems are dependent in some way

tailwindlabs/tailwindcss#11506