[sjsanc]

Have there been any comparisons written about Tailwind's performance vs thoughtfully selected CSS? I've been writing Tailwind exclusively for the last year or so and I haven't noticed anything in particular, but I find that using utility classes causes me to lose an awareness of the cascading nature of CSS. Aside from the filesize bloat due to the bigger HTML files, do long and highly-repetitive class lists slow down style parsing or DOM interaction? And if so, would @apply directives have an advantage over class lists?

[DanielHB]

I can't say much about selector performance besides that class selectors (.class-name) being very fast, opposed to complex selectors (like "#some-id > div a"). Of course less classes applied means less work for the browser, but the real cost is the complex selectors

With regards to bloated HTML, that might seem the case but since you reuse the same class-names everywhere in your app (and tailwind JIT removes non-used classes), compression really cuts down on the size of your bundles. It just looks bloated in the web inspector. This is a disadvantage, it is a bit hard to debug HTML with all those class-name strings around, although I would say web-inspectors should just truncate "class" attr value

With bundler performance it adds some overhead (tailwind has to go through all your .js/tsx files), but in my experience not noticeable