tailwindcss variables not working in Chrome extension

How to fix it

/* If your code is like this in global.css */
@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 47.4% 11.2%;
        /* 
        ...
        */
    }
}

/* Try this instead: 'Change :root to :host' */
@layer base {
    :host {
        --background: 0 0% 100%;
        --foreground: 222.2 47.4% 11.2%;
        /* 
        ...
        */
    }
}