[BUG] tailwindcss doesn't work in content script UI

[zshnb]

What happened?

I use antd and tailwindcss, this is my content script UI

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

export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
  document.querySelector("#player")

const HOST_ID = "engage-csui"

export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = antdResetCssText
  return style
}

export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.appendChild(shadowHost)
  mountState.observer.disconnect() // OPTIONAL DEMO: stop the observer as needed
}

export default function Toolbar() {
  return (
    <StyleProvider container={document.getElementById(HOST_ID).shadowRoot}>
      {
        showDownloadButton && (
          <Flex gap={'middle'} className={'ml-4'}>
            <Button type={'text'} shape={'circle'} icon={<Video/>} onClick={() => handleDownloadVideo()} loading={videoLoading}/>
            <Button type={'text'} shape={'circle'} icon={<Images size={18}/>} onClick={handleDownloadThumbnail} loading={thumbnailLoading}/>
            <Button type={'text'} shape={'circle'} icon={<Captions/>} onClick={() => handleDownloadSubtitle('text')} loading={subtitleLoading}/>
          </Flex>
        )
      }
    </StyleProvider>
  )
}

I add ml-4 in Flex component, but I didn't see the effect.

Version

Latest

What OS are you seeing the problem on?

No response

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

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

[karthest]

What is your antdResetCssText ? Does it contains

@tailwind base;
@tailwind components;
@tailwind utilities;

?

[zshnb]

What is your antdResetCssText ? Does it contains

@tailwind base;
@tailwind components;
@tailwind utilities;

?

yes, but I removed @tailwind base

[karthest]

Did you set prefix in tailwind.css.js ?

What is your antdResetCssText ? Does it contains

@tailwind base;
@tailwind components;
@tailwind utilities;

?

yes, but I removed @tailwind base

Did you set prefix in tailwind.config.js ?

[zshnb]

Did you set prefix in tailwind.css.js ?

What is your antdResetCssText ? Does it contains

@tailwind base;
@tailwind components;
@tailwind utilities;

?

yes, but I removed @tailwind base

Did you set prefix in tailwind.config.js ?

no

[datkira]

Have you had the solution? I met the same issue

[zshnb]

no still need @karthest help

[MannyCooper]

Make sure that the location of your content.tsx is included in the content section of your Tailwind configuration. I've encountered a similar issue before, but this solved it.

module.exports = {
  ...
  content: [
    ...
    './contents/**/*.{ts,tsx}',
  ],
  ...

[zshnb]

Make sure that the location of your content.tsx is included in the content section of your Tailwind configuration. I've encountered a similar issue before, but this solved it.

module.exports = {
  ...
  content: [
    ...
    './contents/**/*.{ts,tsx}',
  ],
  ...

thanks, I will try it

[wujieli0207]

Make sure that the location of your content.tsx is included in the content section of your Tailwind configuration. I've encountered a similar issue before, but this solved it.

module.exports = {
  ...
  content: [
    ...
    './contents/**/*.{ts,tsx}',
  ],
  ...

thanks, I will try it

Have you solve it. i cannot solve it use this method

[nkg168]

Try adding the following code to content.ts if it is not there.

import cssText from "data-text:~style.css"

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

https://docs.plasmo.com/framework/content-scripts-ui/styling#import-stylesheet