Importing Tailwind CSS stylesheets for every content script UI component: how bad for performance?
So, I've really been struggling getting Tailwind to play nicely with Plasmo, and specifically content script UI components (CSUI). My components are being overlaid into the hosting webpage which means I don't have the ability to just import one stylesheet at a "root" level (or maybe I can? I dunno) and instead have many of my own components inserted into the UI within a shadow root element. Unfortunately, since I don't have a normal root for all my components that means that I need to import the styles for each component individually, and since I'm using Tailwind that seems to mean that I have to import the
globals.css
file for Tailwind (which also imports other stylesheets into itself) for each component.The overall size of this import is not negligible and since my components append themselves to posts on a social media feed I'm also concerned that the issue could be exacerbated.
My question is: how much of an issue is this for performance? I am mostly concerned about each component having a <style>
element containing kilobytes of CSS rules. At what point does this become a performance issue? Does each component's stylesheet need to be parsed or is there opportunity for caching? Does the extra size of the DOM also make lookups, etc more costly, etc?
Would love some feedback. Thank you!0 Replies