The Tailwind Effect

The Tailwind Effect

What is Tailwind?

So by now, you've probably heard about a little CSS front-end framework called Tailwind CSS. As I just said Tailwind is a front-end CSS framework created for some reason...all I know is that you can definitely get a project up and running faster than you would with regular CSS (sometimes). Whether you like it or not is not what we're talking about today, no, today I'm gonna educate you on the pseudo-science behind what I like to call "The Tailwind effect". Bare with me this not a joke, nor is it an exact science.

Learning Tailwind

I've spent the last 2 weeks getting acquainted with Tailwind and learning it as fast as possible, prior to this my CSS skills are modest at best, even with a few years of experience in the industry. So why did I decide to learn tailwind and not go the traditional bootstrap route, well everything in bootstrap kind of looks similar. The path has been to learn HTML, CSS and Javascript, jump into a CSS and js framework like React or Angular and call it a career (day). So I took it upon myself to see if Tailwind actually makes sense, and to my surprise, it does...it makes a lot of sense. The designs are really nice, the workflow is much faster than my usual (though it does take some getting used to plugging CSS into your HTML and making sense of it all).

The Tailwind Effect

Now for the good part, the effect itself. So when I refer to the effect, I'm talking about how much quicker you're able to pick up CSS fundamentals by writing Tailwind code. I speak for myself here when I say there are some things about CSS that I've never quite understood, causing me to consider CSS as my archnemesis...until now of course. Tailwind has not only taught me a few things I didn't know but also forced me to go out of my way to google some of the gaps in my knowledge just so that I can come back and finish my Tailwind projects.

Now of course take this with a pinch of salt when I tell you that Tailwind has greatly improved my CSS skills because maybe it hasn't. My feeling is that the shortcode has helped me to understand what exactly my code is affecting and there's no need for me to spend half an hour trying to figure out why things aren't aligning. I mean can it be any simpler than text-gray-500? Or

<div class="space-y-6 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

which is clearly telling you that the space between is affecting the y-axis.

Conclusion

My theory might not be rock solid but it's a case for more research and I will probably find more people out there who feel the same has happened to them. it goes hand in hand with the age-old saying that you learn better by doing, so of course the more tailwind you write, the more CSS you'll understand.