Chrome Extension with React 18 and TailwindCSS - Styles are overwritten

Question

first question here so please don't roast me. I am battling an issue when it comes to a React Extension I've build - in particular when it comes to the styling.

The following setup: I've built the extension with using React 18 (Vanilla) and TailwindCSS. The Extension works fine in terms of functionality and renders the correct styles on most pages - however on some important pages (e.g. LinkedIn), it does not render correctly.

I read about it and moved to a shadow Root, with the large issue, that Tailwind styles are not applied. Different tries later, I could not get the Tailwind styles to work and started rewriting a whole style sheet dependent on the Tailwind utility classes (probably not the best solution, however I could get nothing to work).

After rewriting a whole stylesheet addressing the CSS utility classes I use, I have just tested it again - and the styles are working as previously: Working fine on most sites, however get overwritten by e.g. LinkedIn. At this point I have no idea how to move further, as this is ridicolous.

One point here: The app works similar a chatbot (e.g. Intercom) - so, a modal trigger is inserted into the DOM and on click, opens up the modal. Both trigger and Modal are being influenced by other styles.

Some code to understand the issue:

Rendering the Shadow DOM

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import { render } from 'react-dom'
import { ExtensionActivated } from './context/extensionActivated'

const extensionRoot = document.createElement('div')
extensionRoot.id = 'react-chrome-app'
document.body.appendChild(extensionRoot)

const MainApp = () => (
    <React.StrictMode
        <ExtensionActivated>
            <App />
        </ExtensionActivated>
    </React.StrictMode>
)

const root = document.querySelector('#react-chrome-app')
root.attachShadow({ mode: 'open' })

render(<MainApp />, root.shadowRoot)

Excerpt of the style sheet:

.main-trigger {
    position: fixed !important;
    bottom: 50px !important;
    right: 20px !important;
    margin: 0px !important;
    height: 48px !important;
    max-height: 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    border-radius: 9999px !important;
    background-color: #000000 !important;
    padding: 0px !important;
    cursor: pointer !important;
}

.trigger-wrapper {
    display: flex !important;
    justify-content: center !important;
}

.icon-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 8px !important;
    display: flex !important;
    width: fit-content !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon {
    height: 28px !important;
    width: 28px !important;
}

Rendered in the DOM: Styles Rendered in Shadow DOM

React Rendered in Shadow DOM