Tailwind CSS from parent page leaking into CSUI

[JoshuaPerk]

What happened?

When building a basic CSUI (with Vue), default config - the CSS from the parent page is leaking into the shadow/root component. My understanding is this should not be the default behavior.

Code:

<template>
  <div class="h-72 w-72 bg-red-500 fixed top-0 right-0">
    <h1 class="font-sm text-sm">This is a test</h1>
  </div>
</template>

<script>
import cssText from "data-text:~style.css"

export default {
  plasmo: {
    config: {
      matches: ["<all_urls>"]
    },
    // Tailwind CSS must be injected into the parent component
    getStyle: () => {
      const style = document.createElement("style")
      style.textContent = cssText
      return style
    }
    // getOverlayAnchorList: async () => document.querySelectorAll("a")
  }
}
</script>

<style>
#plasmo-shadow-container {
  position: relative;
}
</style>

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

This is the case with tailwind since it consumes the same style. Simply add a namespace to your tw config

[JoshuaPerk]

Thanks for the help, @louisgv! Are you referencing adding a prefix to tailwind.config.js and then adding that prefix every time I use tailwind classes? It seems like I'm getting font/text size/text colors leaked through even when no tailwind classes are applied.

[JoshuaPerk]

I think this might not be related to Tailwind. I took out reference to TW in my style.css file and I still see variables like font, font size, line height, color and root pixel size being inherited directly from the parent page.

Here is an example: when inspecting the extension text, the font is 'Inter' which is coming from the parent DOMs style sheet.

[JoshuaPerk]

The only way I've been able to work around this so far is to explicitly set all the properties back on my components top-level element like this:

text-base text-white font-sans font-normal leading-normal antialiased

For some reason, I wasn't even able to set these rules in the style.scss file. For example, the following did not work:

// [ style.scss ]

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
p {
  color: red !important;
}

The above would not set any text color to red. Instead, the extension would still inherit the parent pages styles.

I did some additional exploration of setting all: initial to specific selectors (body, html, etc) as well as the global level *.

[JoshuaPerk]

For those following along, this solution didn't work for long... there still seems to be some sort of root units being leaked from the parent page.

[JoshuaPerk]

I think this will be my final update - after much poking around, I realized the problem was in the fact that Tailwind uses rem as it's core unit for everything. And since Plasmo uses a shadow DOM, it does not have it's own html/body where - making TW look to the true root of the page. Most pages use 16px but it obviously is highly variable, leading to lots of inconsistencies.

I weighed my options of putting everything in an iFrame but instead decided to convert all of Tailwind's classes to static px values.

There's a pretty good thread on ways to automate this using postcss.

[tylermcrobert]

@JoshuaPerk Did you end up going the iframe route? I'm in the same camp here

[kilingzhang]

Not just Tailwind, even if I don't use Tailwind, there will still be leakage issues