Tailwinds with content.tsx

// content.tsx
import cssText from "data-text:~style.css"
import type { PlasmoCSConfig } from "plasmo"

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

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

const PlasmoOverlay = () => {
  return (
    <div className="w-96 h-96 text-red-500 bg-red-500">
      <button className="w-48 h-48 bg-red-300">hello</button>
    </div>
  )
}

export default PlasmoOverlay

// content.tsx
import cssText from "data-text:~style.css"
import type { PlasmoCSConfig } from "plasmo"

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

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

const PlasmoOverlay = () => {
  return (
    <div className="w-96 h-96 text-red-500 bg-red-500">
      <button className="w-48 h-48 bg-red-300">hello</button>
    </div>
  )
}

export default PlasmoOverlay