EXP | Explain Plasmo Tailwind Classes (e.g. plasmo-flex)

[songyang-dev]

What is the example you wish to see?

The current command that sets up Tailwind creates something different from the docs.

pnpm create plasmo --with-tailwindcss

The most important difference is the TailwindCSS classes in the example. They all have a plasmo prefix. For example, here is popup.tsx.

import { CountButton } from "~features/count-button"

import "~style.css"

function IndexPopup() {
  return (
    <div className="plasmo-flex plasmo-items-center plasmo-justify-center plasmo-h-16 plasmo-w-40">
      <CountButton />
    </div>
  )
}

export default IndexPopup

The example on the https://docs.plasmo.com/quickstarts/with-tailwindcss uses normal Tailwind. There is no explanation why the generated example uses a plasmo prefix. The plasmo-prefix example runs without errors, but I don't know if it is looking the way it's supposed to.

(website's popup.tsx)

import { useReducer } from "react"
 
import "./style.css"
 
function IndexPopup() {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default IndexPopup

Is there any context that might help us understand?

No response

Code of Conduct

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