I've been following Adam Wathan for a while now, ever since he first began creating Tailwind CSS, but I haven't been able to pick it up and try it out until now. At first, I wasn't a fan of the long verborse CSS classes like
w-full bg-red-100 font-bold text-center text-white but it has since grown on me. I'm starting to really prefer this way of styling things in HTML as opposed to coming up with class names and going back and forth between the HTML and CSS files. Not only does this way of styling save me time, it also eliminates the need to come up with class names (because naming is hard).
The real benefit of utility classes comes down to the fact that they are highly reusable and not just specific to a component like the
.header-nav class. Creating a class like
.header-nav means you'll most likely only be using it once, EVER. This single-use class adds to the stylesheet's file size. The higher the file size... the slower your site will perform on slow connections. Keeping your file sizes small is the best way to go when building websites. While Tailwind CSS initially compiles nearly all the utility classes it comes with (stylesheet file size could end up being a few megabytes), it is recommended to use purgecss to wipe all unused classes from your stylesheet. You can learn more about it on Tailwind's documentation here.