plasmo with shadcn ui components, style of shadcn ui component not work in content script ui
tailwind css config likes below, and I also replace :root to :host by related post searched:
export const getStyle = () => {
const style = document.createElement("style");
style.textContent = cssText.replaceAll(':root', ':host');
return style;
}
module.exports = {
darkMode: ["class"],
prefix: "plasmo-",
content: [
'./pages//*.{ts,tsx}',
'./components//.{ts,tsx}',
'./app/**/.{ts,tsx}',
'./src/*/.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
......}
export const getStyle = () => {
const style = document.createElement("style");
style.textContent = cssText.replaceAll(':root', ':host');
return style;
}
module.exports = {
darkMode: ["class"],
prefix: "plasmo-",
content: [
'./pages//*.{ts,tsx}',
'./components//.{ts,tsx}',
'./app/**/.{ts,tsx}',
'./src/*/.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
......}

