Tailwind config with important: '#....' messes up popover styles

[wheeOs]

Describe the bug

In my project I'm forced to use the important selector strategy to prevent styling conflicts on the website. I'm not sure if this is a bug or something to be adjusted in another configuration file elsewhere.

without TW selector strategy:

with TW selector strategy:

Reproduction

See https://stackblitz.com/edit/github-tc8wih?file=src%2Flib%2Fcomponents%2FFoo.svelte

due to the important: '#app' configuration the borders of the popover are not visible anymore

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 4.57 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.2 - /usr/local/bin/node
    npm: 9.5.0 - /usr/local/bin/npm
    bun: 1.1.4 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    bits-ui: ^0.21.10 => 0.21.10 
    lucide-svelte: ^0.396.0 => 0.396.0 
    svelte: ^5.0.0-next.155 => 5.0.0-next.155

Severity

annoyance

[wheeOs]

ok I found a workaround for this. Instead of using the id of the app, I use a unique class for the selector, since popovers are added outside of the app node. That class has to be added to the root node of the document when starting the app:

in tailwind.config.js:

const config = {
    important: '.unique-class',

in main:

const TW_CLASS_SELECTOR = 'unique-class';
document.querySelector('body')?.classList.add(TW_CLASS_SELECTOR);