Chubby Princess
PD🧩 Plasmo Developers
•Created by Chubby Princess on 10/19/2023 in #👾extension
content.tsx with TailwindCSS affected by page styles
@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;
}
8 replies
PD🧩 Plasmo Developers
•Created by Chubby Princess on 10/19/2023 in #👾extension
content.tsx with TailwindCSS affected by page styles
@jgoon I have and still have the same issue.
8 replies