How to use tailwindcss in contentui? I have successfully used tailwindcss in popup. And some compone

How to use tailwindcss in contentui? I have successfully used tailwindcss in popup. And some components were customized and successfully displayed in the popup. I want to display this component into contentui as well. I found that using tailwindcss directly on a span text is effective, and the internal styles of the custom components are effective, but the unexpanded ones have no tailwindcss styles. (The custom component is a drop-down box) code:
import styleText from "data-text:~style.css"

import type {
PlasmoCSConfig,
PlasmoGetInlineAnchor,
PlasmoGetStyle
} 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";


export const getStyle: PlasmoGetStyle = () => {
const style = document.createElement("style")
style.textContent = styleText
return style
}

export const config: PlasmoCSConfig = {
matches: ["*://*.bing.com/*"]
}

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

const PlasmoCSUI = () => {


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

)
}

export default PlasmoCSUI
import styleText from "data-text:~style.css"

import type {
PlasmoCSConfig,
PlasmoGetInlineAnchor,
PlasmoGetStyle
} 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";


export const getStyle: PlasmoGetStyle = () => {
const style = document.createElement("style")
style.textContent = styleText
return style
}

export const config: PlasmoCSConfig = {
matches: ["*://*.bing.com/*"]
}

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

const PlasmoCSUI = () => {


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

)
}

export default PlasmoCSUI
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?