0

I am writing a Google chrome Extension and decided to use next.js and tailwindcss. When testing my extension, I happened to be on another page where I had used tailwindcss on the page for styling. I noticed that my pages styling was getting messed up and assume it's due to conflicts between the two. Is there a way of namespacing or packaging tailwindcss into a developed chrome extension in a way so that the extension doesn't interfere with the pages styling should others pages use tailwindcss as well?

I did come across another post referencing https://www.npmjs.com/package/postcss-parent-selector but when I incorperated it, it wasn't allowing my width for my extension to be set as well as a few other css elements. I tried a few things then I eventually found that it was the use of the parent-selector module that was somehow preventing the proper css from being used.

I then found out about the prefix option in tailwind.config.js, but it seems I was still dealing with worse conflict issues because both primary tailwind style files were overwriting base, component and utilities.

I am going to go back to looking at postcss-parent-selector to see if I can better understand why it is failing at times, but wanted to reach out here to see if anyone had possibly any other options or suggestions.

Thanks for your time!

xtr33me
  • 936
  • 1
  • 13
  • 39
  • 1
    See also [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/a/25100953) – wOxxOm Jan 23 '23 at 20:49
  • This is awesome info and something I'm going to look into now as well. Thanks @wOxxOm – xtr33me Jan 23 '23 at 21:02

2 Answers2

0

One of the solution would be using prefix option in tailwind.config.js. This option allows you to add a unique prefix to all of the class names generated by Tailwind. This way, the class names used in your extension will be different from the class names used on the page, preventing conflicts.

tailwind.config.js

module.exports = {
    prefix: 'tw-', // Add this here Now all of your classNames require 'tw-' prefix
}
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • Thanks Krishna, but in my post I stated that I did try this option but it didn't work as expected because I was still getting conflicts with pages that were running tailwindcss as well. Prefix will work well when you have custom styling and you don't want your tailwind interfering with non-tailwindcss styling, but when the extension is running on a page with tailwindcss as well, this option didn't work. I believe the reason is due to the way you overwrite base styles. When using this I wasn't seeing an issue with my extension, rather my extensions css was interfering with the clients page. – xtr33me Jan 26 '23 at 15:53
  • 1
    @xtr33me , try [preflight](https://tailwindcss.com/docs/preflight) option, this is the perfect fit for you, and also refer [important](https://tailwindcss.com/docs/configuration#important) option, Hope it helps, let me know if it worked out for you – krishnaacharyaa Jan 26 '23 at 15:56
  • Thank you Krishna for the info. I haven't looked into that yet. It will take a little bit of reading on this, but I am interested in looking at that solution as well. Thanks again! I will let you know. – xtr33me Jan 26 '23 at 16:06
  • in brief `preflight: false` will remove the base class implemented by tailwind-css, I guess you are looking for this. – krishnaacharyaa Jan 26 '23 at 16:34
0

In the end I implemented a solution relative to the reference wOxxOm provided. I configured an outer selector similar to "all" in the link wOxxOm shared and then from there I was able to accomplish the nesting of my classes without interference on the page. I unfortunately haven't had a chance to look at Krishna's preflight solution yet as I had already started venturing down the other option. Being that it worked, I stuck with that solution. In the future when I get a bit more time, I will be taking a look at the preflight option shared to see if that yields a similar result as well. If so, it seems it would be an easier approach to take. Thank you all for your help!

xtr33me
  • 936
  • 1
  • 13
  • 39