content.tsx with TailwindCSS affected by page styles
I have a content.tsx using TailwindCSS for styling. My project setup is using the template TailwindCSS setup. The problem is, my font styles are being affected by website styling.
The only site where my styling is working as expected is on plasmo.com. On some sites, the font size is smaller, on other sites the font is not correctly loaded.
import cssText from "data-text:~style.css"
import type { PlasmoCSConfig } from "plasmo"
import { useEffect, useState } from "react"
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = cssText
return style
}
export const config: PlasmoCSConfig = {
matches: ["<all_urls>"]
}
const PlasmoOverlay = () => {
const [isTextSelected, setIsTextSelected] = useState(false)
const handleSelectionChange = () => {
const selectedText = window.getSelection()?.toString().trim()
setIsTextSelected(!!selectedText)
}
useEffect(() => {
document.addEventListener("mouseup", handleSelectionChange)
document.addEventListener("keyup", handleSelectionChange)
return () => {
document.removeEventListener("mouseup", handleSelectionChange)
document.removeEventListener("keyup", handleSelectionChange)
}
}, [])
return (
isTextSelected && (
<div className="font-noto fixed bottom-10 right-10 bg-gradient-to-bl from-green-dark to-green-light text-white font-bold px-6 py-2 rounded-full shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
HANSENAI
</div>
)
)
}
export default PlasmoOverlay
The only site where my styling is working as expected is on plasmo.com. On some sites, the font size is smaller, on other sites the font is not correctly loaded.
import cssText from "data-text:~style.css"
import type { PlasmoCSConfig } from "plasmo"
import { useEffect, useState } from "react"
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = cssText
return style
}
export const config: PlasmoCSConfig = {
matches: ["<all_urls>"]
}
const PlasmoOverlay = () => {
const [isTextSelected, setIsTextSelected] = useState(false)
const handleSelectionChange = () => {
const selectedText = window.getSelection()?.toString().trim()
setIsTextSelected(!!selectedText)
}
useEffect(() => {
document.addEventListener("mouseup", handleSelectionChange)
document.addEventListener("keyup", handleSelectionChange)
return () => {
document.removeEventListener("mouseup", handleSelectionChange)
document.removeEventListener("keyup", handleSelectionChange)
}
}, [])
return (
isTextSelected && (
<div className="font-noto fixed bottom-10 right-10 bg-gradient-to-bl from-green-dark to-green-light text-white font-bold px-6 py-2 rounded-full shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
HANSENAI
</div>
)
)
}
export default PlasmoOverlay
