Sarah Dayan writes about front-end development, especially CSS architecture, utility-first CSS, and handling money in JavaScript.
HN commenters cite her posts as a Tailwind-friendly rebuttal to the idea that utility classes equal inline styles, and discuss her advice on avoiding tag selectors.
I don't think is accurate. While it might not be built in currently, the same is also true of something like SASS or even plain CSS.
The article describes a strategy for loading CSS in the most performant way given a variety of interconnected factors (mainly JS).
You could generate the Tailwind file, and then split it when the media queries start (they're all grouped in order of screen size) with a small bash script into separate files as a part of your build process.
You could have multiple build steps that analyze your component architecture and generate separate CSS bundles for each component. This is already done w/ most JS frameworks.
If your argument is one of the final CSS file size, that is not an issue. Tailwind only generates classes that you write in your markup. Most Tailwind bundles I have seen, are dramatically smaller than their CSS counterparts, and it makes sense when you think about how CSS is written.
Say you have a two UI elements; an article preview image and a user avatar. Say you want them to mostly display the same, but with some tweaks to the avatar to add a fancy filter on hover. Okay easy enough. Maybe you start with some sort of base mixin and then overwrite add behavior for the avatar. Over time, you add more and more tweaks to the avatar until one day, you get a call from the head of Design Department that the articles are getting their own special CSS filter. Okay, so now you extend the article. Over time the two continue to drift until…
> The commit will now contain 10000 non html structure changes to an html
It's an acceptable trade off. Nothing is perfect. In exchange you're guaranteed those changes only affect this markup, and not some other li > ul > a whatever somewhere else.
> Might as well go back to doing inline styles
No, it is not. This has been explained thousands of times anyone says "tailwind is like inline styles". You can do responsive, you're limited to a consistent subset of rules, minimal output css file, caching, etc, etc. For example, here [1] is an explanation why it is not the same, but there are thousands.
By reading your answers I deduce you've not used it yet. And this is exactly what is being discussed here. Fanatics closed inward looking people will never like it, nor anything that defies what they've been taught for years. Like religion almost. You have to try it for real to see the benefits. It is not perfect, but the net result is very positive for a lot of people as you can see from the usage statistics. Just be a bit more open minded to new tech and give it a try. At least you'll understand why it is not the same as inline styles which is a pretty basic thing you understand after 1 hour of using it.
[1] https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles
I’m sorry but this discussion is startling. Currency calculations and accuracy are critical, why would anyone use this if there’s even a chance it gives incorrect results? Once you research the topic you’ll see why JavaScript based languages haven’t been used generally. There are solutions for currency math in js like dinero.js:
https://frontstuff.io/how-to-handle-monetary-values-in-javascript
> It takes care of carry over values in division, i.e. consider 1 dollar divided by 3, it'll return 3 currency instances with 34, 33, 33 as the values instead of 33.3333.
I think the proper/common name for this is 'allocation', not 'division'.
For example, see https://frontstuff.io/how-to-handle-monetary-values-in-javascript and look for the subheading 'Pitfall #3: Percentage vs. allocation'.
I came across this blog post which talks against styling HTML tags and using classes for performance reasons and scalability. I'm not sure if the impact is noticeable on web browsers, I'd love to see an objective comparison.
https://frontstuff.io/you-need-to-stop-targeting-tags-in-css#performance-issues
The amounts must be specified in cents, as floats can’t be relied upon to perform calculations. That was my #1 reason to design the library using solely integers. I wrote all about it here: https://frontstuff.io/how-to-handle-monetary-values-in-javascript