Add Prefix To Isolate Source Website And Our Plugin

[Blushyes]

Thank you for such an awesome project🥰! While using it, I've run into some issues, like class name conflicts between Tailwind CSS and the original website's styles.
I think it can add a prefix(to the tailwindcss) by Custom Directives of Vue to isolate the source website and our Chrome plugin like this:

<div v-prefix-class="flex flex-col ...">
  ...
</div>

and it will be:

<div class="custom-prefix-flex custom-prefix-flex-col ...">
  ...
</div>

or we can use some building utils like postcss to add prefix autoly.
What's your take on the two solutions above? If it's feasible, I can try to code it.

[Blushyes]

Even with a prefix added which solved some bugs, my plugin still messed with the source webpage 😣. After thoroughly checking each part (yep, I went through commenting it out bit by bit 😄) turns out, the culprit was the @tailwind base's preflight causing the chaos. So, if you want to keep your plugin from altering the original page, you've got to disable that bad boy. 👀🚫

[Blushyes]

After my relentless efforts, I've hit upon the ultimate hack 💡: utilizing distinct tailwindcss setups for content-script and other contexts. Here's the lowdown: in the realm of content-script, I've nixed the preflight feature ✈️ from tailwindcss, while in other environs, I've kept preflight live and kicking (to dodge any potential tailwindcss style snafus, though they seem to be rarer than a blue moon 🌚).

[mubaidr]

Nice find! Thanks for taking the time to report, analyze and track this issue. 🥇

Here's the lowdown: in the realm of content-script, I've nixed the preflight feature ✈️ from tailwindcss, while in other environs, I've kept preflight live and kicking (to dodge any potential tailwindcss style snafus, though they seem to be rarer than a blue moon 🌚).

Does this ensure that content script styling does not conflict with page styles anymore?

OH and If you are willing to create pull request, that would be awesome! 😊

[Blushyes]

Nice find! Thanks for taking the time to report, analyze and track this issue. 🥇

Here's the lowdown: in the realm of content-script, I've nixed the preflight feature ✈️ from tailwindcss, while in other environs, I've kept preflight live and kicking (to dodge any potential tailwindcss style snafus, though they seem to be rarer than a blue moon 🌚).

Does this ensure that content script styling does not conflict with page styles anymore?

OH and If you are willing to create pull request, that would be awesome! 😊

I have resolved the issue and submitted a PR 🛠️

[mubaidr]

I have checked on multiple tailwind css baes sites and I don't see any problem with styles being overwritten.

Can you please mention specify? Thanks

[Blushyes]

I have checked on multiple tailwind css baes sites and I don't see any problem with styles being overwritten.

Can you please mention specify? Thanks

I overlooked that this project has some differences from mine:
This project did not intend to use tailwindcss in the content-script (although I think it is entirely possible to do so, for example, if you want to implement a feature where selecting a word pops up something like a tooltip, then the style of that tooltip could be entirely written in Tailwind)
And then conflicts arise in the situation where:
When you use document.body.appendChild(myElementWhoUseTailwind) to insert web elements in the content-script rather than using an iframe (I am not sure if iframe will cause conflicts), this can lead to Tailwind's styles being applied to the webpage as well, thereby causing conflicts.

Of course, the way I'm using it is a bit different from the above, as I'm using a vue3 app mounted on myElementWhoUseTailwind, and then the components use Tailwind.

[mubaidr]

Absolutely, this is the correct use case.

While normal content script page/frame has not issue when using tailwind css, this use case (injecting custom elements into webpage with tailwind styling) is still very much valid.

We have to find a way for this. Noted with thanks!