🧩 Plasmo Developers•12mo ago

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

This doesn't change the CSS at all. What can I do to debug this? This is a fresh project with a content.tsx and tailwinds in style.css. Tailwinds works on the normal popup page but not here. Any help would be greatly appreciated! Thank you!

4 Replies

dimsey•12mo ago

this is my tailwinds.config btw

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.tsx"],
  plugins: []
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.tsx"],
  plugins: []
}

dimsey•12mo ago

One thing I will say is that this (https://github.com/PlasmoHQ/examples/tree/main/with-tailwindcss) does work. But curious as to why mine doesn't

GitHub

examples/with-tailwindcss at main · PlasmoHQ/examples

🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples

Arcane•12mo ago

@dimsey has reached level 1. GG!

dimsey•12mo ago

Oh figured it out In content, you have to prefix the CSS with plasmo-[tailwinds], e.g.., plasmo-bg-red-500 instead of bg-red-500

Gaming

Programming

Tailwinds with content.tsx