4 ms·
So we are building an all new...rather large scale product for millions of users and have been using Tailwind since the beginning of the year. In my experience
by agloeregrets 4y ago
So we are building an all new...rather large scale product for millions of users and have been using Tailwind since the beginning of the year. In my experience writing a production app the only miss in Tailwind for me from article is the syntax for multiple properties that require the same modifiers.
writing:
"p-1 md:p-3 md:text-h1 hover:md:scale-95 hover:underline hover:text-blue hover:scale-105" is super annoying compared to something like:
"p-1 text-h2 md:[p-3 text-h1] hover:[underline text-blue scale-105 md:scale-95]"
While length is still kinda long, it is far more clear what each modifier is impacting. Plus a pattern like that would discourage this mistake:
"p-1 md:text-h1 hover:underline hover:text-blue md:p-3 hover:scale-105"
Where quick work causes out-of-order classes that will produce the same result but are harder to debug due to the split off modified class.
- ethanbond 4y ago+1 this is my only notable sticking point with Tailwind as well. If you could compute the names dynamically it wouldn’t be an issue, but alas. Tailwind is really amazing, and I was a vocal naysayer for a long long time before eating the “mindset shift” cost. Easily one of the biggest productivity boosts I’ve seen in years.
- yurishimo 4y agoI believe there is new syntax coming in v4 to do something similar to this. I tried finding the relevant tweet with examples, but came up short. It might use parens and commas though. Example: `hover:(bg-blue,text-5xl,px-8)`