Scoping tailwind styles
I am building some components, which should be safely pluggable into shopify theme. First thought - I should use shadow DOM to scope styles to the component (since I don't know what potentially could be inside the shopify theme). Of course I want to use tailwind, but it seems like it's not quite fitting. Anyone faced such a challenge? Haven't found any so called "right" solutions for the problem.
6 Replies
i think tailwind has a configurable prefix. so you could start all of your types with mything-mx-2 for example
does that solve it for you?
not a 100% guarantee, but close enough for me
Not quite. Since my problem is not styles flowing outside, rather styles from outside messing with my components.
The point is to provide predictable styling and behavior of my components no matter where they are.
right but im saying if youre components are all prefixed with
hello- then the person using it would need to have a class that starts with helloI understand, but let's say on the website where my component is mounted, there is a global css stylesheet which sets styles for tags (like h1, div, etc.). I don't want those styles to affect my component. I can avoid this if I put component under shadow root, but now I need to add tailwind preflight (modified to accommodate selectors for shadow dom) and styles to each component. I am just not sure what is the right way to inject those styles...
That is my main concern, and it's quite weird that there is no common solution for such problems, since I imagine it is applicable to lots of use cases
Can you use an iframe?
No, that's not an option unfortunately
I was thinking maybe generating shared stylesheet with utility classes and preflight for all components and then attaching a link to each shadow root, then it will be cached locally and won't add any network overhead. The question left is how to organize development and deployment workflows for such configuration...