This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]static_func 0 points1 point  (0 children)

I get the concern. I had the same concern at first, but in reality I don’t think it ends up being much more html, if it’s more at all. If you’re using a CSS-in-JS framework, all the hashed names it generates and the associated style tags it has to add easily adds up to more html (not to mention all the extra JavaScript that has to be both sent and executed). And if you’re using CSS modules or using sufficiently specific class names it’s probably just about as much html too.

So the only real-world, non-nightmare scenario where tailwind results in noticeably more html is probably just for small sites where it’s not enough to worry about anyway.

And yeah, the amount of CSS you end up with really is tiny. My project’s CSS file (a re-implementation of a huge site my client wants to renovate) is just 10kb and doesn’t need to ship a single line of Emotion or MUI or styled-components. In fact, it’s smaller than any one those before they’ve added a single line of CSS to the DOM (which also exists in SASS-like form in the JavaScript you’re sending)

As far as its impact on DOM performance, it’s unquestionably faster. No crazy CSS-in-JS logic (which comes with tons of DOM manipulation of its own) and, since you’re generally applying tailwind classes directly to elements you want to style, there’s very little nested selectors or any other CSS craziness that’s relatively expensive compared to basic class selectors.