Considering using Tailwind?

Hello,

This is not really a bug but more a question like (Using class vs host - #6 by bakura10) as I’m also working on a similar component system and would love to hear about some technical decisions that were made.

I’ve checked Polaris web component code and I can see that you are using adopted stylesheet, where each component have their own CSS. I really like this pattern, but one issue I’m facing is bundle size increase. In the case of Polaris, I can see it becoming a problem as more and more components are being added, especially complex components such as popover, picker…

I’ve done various experiments and found that using Tailwind works pretty well in context of shadow dom with adopted stylesheet. This patterns allows to have only one global stylesheet that is being adopted by all web components. Due to the nature of tailwind atomic classes, there is no conflicts whatsoever (and due to shadow dom isolation, no potential conflicts neither with other versions of Tailwind being embedded).

One benefit here is that the CSS size stop growing at some point, and I feel it would be a good solution for Polaris. However, as for the other question, I imagine this solution might have been considered, and I would love to hear about the reason :slight_smile.

Thanks!

2 Likes