[BUG] How to use tailwindcss style for suspended elements in custom components in contentui?

[sshallow]

What happened?

I have successfully used tailwindcss with popup and contentui. But when I use a custom tsx component, which contains suspended elements, such as popover, selector drop-down box, etc., tailwindcss cannot be applied to these suspended elements. I inspected the web elements and found that the suspended elements were outside of plasmo-csui. How to make these custom components maintain the tailwindcss style when there are floating elements.

The popover in the popup can be displayed correctly,

In contentui, the surface element can be displayed correctly, but the floating element popover contained inside cannot be displayed correctly

code:

import cssText from "data-text:~style.css"
import type {PlasmoCSConfig, PlasmoGetInlineAnchor} from "plasmo"
import {persistor, store} from "~store";
import {Provider} from "react-redux"
import {PersistGate} from "@plasmohq/redux-persist/integration/react";
import {ATMSpaceSwitcher} from "~features/space-switcher";
import {ThemeProvider} from "~components/theme-provider";
import {NotionStatus} from "~features/notion/notion-status";
import {ATMSwitch} from "~features/switch";
import {ATMPopover} from "~features/popover";
import {CircleHelp} from "lucide-react";

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.bing.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
    element: document.querySelector("#b_context"),
    insertPosition: "afterbegin"
})

const PlasmoCSUI = () => {

    const handleSwitchChange = (checked) => {
        console.log("Switch checked:", checked)
        // 在这里执行其他操作
    }

    return (
        <ThemeProvider
            attribute="class"
            defaultTheme="light"
            enableSystem
            disableTransitionOnChange>
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <div className="pb-8 w-full">
                    <span className="text-red-700 text-3xl">
                    AtMyNotion

                    </span>
                        <NotionStatus/>

                        <ATMSpaceSwitcher/>
                        <ATMSwitch
                            id="Advanced-search-mode"
                            label="Search with Filters"
                            onChange={handleSwitchChange}>
                            <ATMPopover
                                tooltipContent={
                                    "Apply advanced filters and sorting on the search page."
                                }>
                                <CircleHelp className="h-4 w-4 text-slate-400"/>
                            </ATMPopover>
                        </ATMSwitch>
                    </div>
                </PersistGate>
            </Provider>
        </ThemeProvider>

    )
}

export default PlasmoCSUI

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.