And this does make a difference when your entire layout is done with Tailwind. Consider that the HTML, unlike the CSS, might typically not be cached, and that the server is now also charged with emitting higher loads of data. Consider also that all these utility classes are all loaded in the CSS on the front page even if some or most of them is used on everything except the front page. The performance win is not as unquestionable as Tailwind would like to suggest.
.button { background-color: blue; color: white; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
Then the browser will need to download less bytes:
<button class="button">Click</button>
Compared to:
<button class="bg-blue text-white px-3 py-2 rounded-sm">Click</button>
And this does make a difference when your entire layout is done with Tailwind. Consider that the HTML, unlike the CSS, might typically not be cached, and that the server is now also charged with emitting higher loads of data. Consider also that all these utility classes are all loaded in the CSS on the front page even if some or most of them is used on everything except the front page. The performance win is not as unquestionable as Tailwind would like to suggest.