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
6 Replies
Having this exact problem, did you find a solution?
@Blantium has reached level 1. GG!
Have you tried using tailwind prefixes?
https://tailwindcss.com/docs/configuration#prefix
Configuration - Tailwind CSS
A guide to configuring and customizing your Tailwind installation.
@jgoon I have and still have the same issue.
@Blantium and anyone else wondering how to resolve this, I had to load fonts using the default (non-tailwindcss) way that plasmo recommends. I saved my fonts in the assets folder, created a fonts.css file, and loaded it within my Plasmo config in content.tsx. All font modifiers from tailwind still work, such as "font-bold", just make sure you use normal css for font-family.
font.css (in my src folder)
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(data-base64:~assets/fonts/NotoSans-Regular.ttf) format("truetype");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
content.tsx
...
export const config: PlasmoCSConfig = {
matches: ["<all_urls>"],
css: ["font.css"]
}
...
style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.noto {
font-family: 'Noto Sans' !important;
}
@Chubby Princess has reached level 1. GG!
Add an ID to your tailwind config and wrap your ext in a div with that ID.
You can also use !important in config or on a case by case basis like !font-bold