How to enable tailwind css in iframe

[Gnosnay]

my way to use it:

// content.tsx
const CustomButton = () => {
  return (
    <a className="tutor-cursor-pointer 
    tutor-z-50 tutor-fixed tutor-top-32 tutor-right-0 tutor-w-12 tutor-h-10 
    tutor-bg-[#ef5350]/75 hover:tutor-bg-[#ef5350]/100
    hover:tutor-w-14 tutor-transition tutor-duration-300 tutor-ease-in-out
    tutor-flex tutor-items-center tutor-justify-center
    tutor-rounded-tl-full tutor-rounded-bl-full"
      onClick={() => {
        let iframe = document.getElementById(DRAWER_ID)
        if (iframe === null || iframe === undefined) {
          const iframe = document.createElement("iframe")
          iframe.id = DRAWER_ID
          iframe.src = chrome.runtime.getURL("/tabs/drawer.html")
          iframe.name = "drawer"
          iframe.className = "tutor-bg-pink tutor-z-100 tutor-fixed tutor-top-0 tutor-right-0 tutor-w-300 tutor-h-screen"
          document.body.appendChild(iframe)
        } else {
          console.log("???", iframe.classList)
          if (iframe.classList.contains("tutor-hidden")) {
            iframe.classList.remove("tutor-hidden")
          } else {
            iframe.classList.add("tutor-hidden")
          }
        }
      }}>

      <svg xmlns="http://www.w3.org/2000/svg"
        stroke="white" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
        className="tutor-w-5 tutor-h-5">
        <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
      </svg>

    </a>
  )
}

as you can see, the both the button and iframe are using the tailwind. but the the tailwind css can take effect for button, however iframe does not work.

May i know how to compile the tailwind css to iframe tabs? thank you so much