External Tailwind CSS variables could affect the shadow root

Describe the bug

Hi WXT experts, I'm currently trying to handle this issue: https://github.com/mengxi-ream/read-frog/issues/225
The problem is: in the read-frog plugin, the sidebar's border color should be gray, but it turns black when opened in Figma.

I've identified the likely cause: Tailwind CSS variable name conflicts between the host page and shadow root. When both environments define variables with the same names, the host page's values interfere with the shadow root's styling.

read-frog currently has Tailwind CSS variables --border and --background. After checking Figma's styles, I found that Figma has variables with the same names: --border and --background. This causes both styles to not be properly applied.

Meanwhile, read-frog also has a CSS variable --foreground, which doesn't conflict with Figma's styles, so it gets applied correctly.

I think shadow root should completely isolate CSS and such behavior is unexpected. I suspect this is related to how WXT handles Tailwind variables that use @property, possibly causing host page Tailwind CSS variables to leak into the shadow root.

I'm not sure if this issue is consistent with what's discussed in https://github.com/wxt-dev/wxt/issues/1195. I tried the solution mentioned in the https://github.com/wxt-dev/wxt/issues/1195#issuecomment-2537031830, but it didn't work.

I've tried adding unique prefixes to CSS variable names to avoid conflicts with host page variables, which works as a temporary solution. However, I believe this issue should be addressed more fundamentally.

Reproduction

• Install the read-frog plugin
• Turn on Enable floating button in the read-frog plugin settings

• Open Figma and log in
• Click the read-frog plugin's floating button - you can see the border is black instead of the gray color set in the code

Steps to reproduce

Please check the content above

System Info

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.43 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.18.0 - ~/Code/frog/read-frog/node_modules/.bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.3 - ~/.nvm/versions/node/v22.18.0/bin/npm
    pnpm: 10.14.0 - ~/.nvm/versions/node/v22.18.0/bin/pnpm
  Browsers:
    Chrome: 139.0.7258.128
    Edge: 139.0.3405.86
    Safari: 18.1

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

Start by reproducing the read-frog floating button issue in Figma and compare the shadow root's --border and --background behavior with --foreground. Then inspect WXT's handling of Tailwind variables and @property, using issue 1195 as related context. Done means host-page variables no longer alter shadow-root styling and the border remains gray in the reproduction.