Since we all get to be so lucky as to having Polaris, it has been a bazillion years it seems since I touched Tailwind for anything. Well, maybe not a bazillion, but older underpowered Polaris anyway.
Fast zap to today. With Polaris, there is little need for anything else in CSS world. I am fishing here for anyone using Tailwind v4 in their Apps. Is it funner than fun? Do you use it to make Polaris better or just to fill gaps Polaris does not?
Kinda curious. I want to play with Tailwind again, but it seems useless for anything Shopify. Anyone beg to differ and willing to show off how they use it?
For some of our apps we use it to fill the gaps, for others, we don’t use Polaris at all but re-created the components we need with Tailwind. Going forward most of our apps won’t use Polaris components because we prefer not to use React/Javascript and just use Tailwind.
I like Polaris for…
The components that provide a Shopify-like look and feel out of the box (inputs, banners, tags etc. etc.).
I don’t like Polaris for…
Layouts (flex, spacing, …), font sizes etc. It feels cumbersome and I often feel like I have to introduce more elements just because I can’t apply spacing etc. directly on most components.
What I’d like to see:
A focused version of Polaris on actual components AND a guideline (+ tailwind theme) for spacing, font sizes etc. That would result in better DX and faster coding for me while still creating a Shopify-like look and feel.
EDIT: That said, I am only using Polaris at the moment in Shopify apps and Tailwind in every other project.
so for us, we use tailwinds a ton on our theme side widgets.
On the admin side of things we still use Polaris but admittedly when it comes to layouts it’s a bit cumbersome.
I think another big consideration for us is the advancement of AI and its ability to speed up programming. Tailwind for the large part hasn’t changed too much over the years and it seems like AI models are very competent building components from screenshots or other references using tailwind. When it comes to Polaris, the library has changed so much that the models constantly make mistakes (cc layouts again and the evolution of Stack ~> BlockStack etc).
So you have a reference in your extension to the styles used by your extension, and you keep that updated via some kind of CSS processor (I used to use PostCSS) to ensure you only download what you need right? How big is your typical payload? What tool do you use?
If you don’t need BFS, go for tailwind. Otherwise, use Polaris. If you stick with Tailwind and wanna get BFS, you’ll have a hard time copying the style from Polaris.