wxt 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

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

Aug 16 '25 05:08 flowKKo

It's probably an issue with TailwindCSS itself: https://github.com/tailwindlabs/tailwindcss/issues/15005

Sep 16 '25 14:09 kachkaev

seems read frog repo don't have this issue anymore. We didn't change the wxt version so it might because Figma change something from their side

We are good to temporarily close this now.

Oct 21 '25 22:10 ananaBMaster