loading...

Why I've let Tailwind take over my life

markmead profile image Mark Updated on ・3 min read

Has anyone else started using something, loved it, and then let it snowball into this giant snow prison that you can't escape from even though it's just snow? Introducing Tailwind.

For real though, I first looked at Tailwind back when the site was this.

Early pictures of the Tailwind website

At the time I was heavily into Bootstrap, I built a few projects with Tailwind but anytime something came along that was customer-facing I jumped straight back to trusty Bootstrap.

Time passes and I move to a new company, a fast-paced digital agency. In my interview, I speak about Bootstrap, and in response, I'm shown Zurb Foundation an all-in-one CSS and JavaScript framework, similar to what Bootstrap is.

I use this for a few months then decide to look for an alternative:

Name Enjoyable Fast to work with Good config Easy to setup Minimal custom CSS Built in JS components Site looks unique
Tailwind 👍👍👍 👍👍👍 👍👍👍 👍👍👍 👍👍👍 👍👍👍
Foundation 👍👍 👍👍 👍👍👍 👍👍 👍 👍👍👍 👍👍👍
Bootstrap 👍 👍 👍 👍👍 👍 👍👍👍 👍
UI Kit 👍👍 👍👍 👍👍 👍 👍👍👍 👍👍👍

These were my personal experiences with them, please don't hate me if I didn't give enough "👍" to your favorite.

As you can see Tailwind won by a long shot. So we start using Tailwind on a few projects, it's going well and it only gets better. Within a few weeks of using Tailwind AlpineJS is released.

This JavaScript framework is by far one of the best additions to the JavaScript ecosystem I have ever experienced. I strongly advise anyone who hasn't tried it, to give it a try.

One of its many benefits is how well it partners with Tailwind. The x-transition feature partners so well with Tailwind, you can add custom animation to something without writing a single line of CSS.

There's a quote from the README that sums up why Alpine and Tailwind are so enjoyable together:

Think of it like Tailwind for JavaScript.
Caleb Porzio, creator of AlpineJS

So it's the start of 2020, within a few months of being at my new job I've moved our frontend stack from this:

  • Zurb Foundation
  • jQuery

To this:

  • StimulusJS
  • AplineJS
  • Tailwind
  • Vue (project dependent)

The impact it had is obvious, the entire process of building a website is faster, we're building more reactive user-friendly websites and it's a far more enjoyable experience. This has all been thanks to Tailwind, it set in motion the snowball to take over the frontend and consume us in its thriving snowy climate.

I nearly forgot to mention Tailwind UI which is not only increasing developer and designer efficiency, it's opening up new opportunities for the Tailwind team as they're now employing staff to take Tailwind to the next level.

So to bring this post to a close, I think it's fairly obvious why I've let Tailwind take over my life but here's a list of reasons just in case:

  • Development speed increase (work in one file, no switching to SCSS files 🙌)
  • Less time writing CSS, making it easier to rapid prototype
  • Pairs nicely with AlpineJS
  • Has built-in CSS purging
  • Constantly being improved (divide and space classes are still my favorite addition, albeit this might beat it)
  • Enjoyable to use
  • Tailwind UI has even further streamlined development

Posted on by:

markmead profile

Mark

@markmead

Building websites 🔨

Discussion

markdown guide
 

Interesting , I'm yet to use tailwind, you might have just sparked my interest.

 

Definitely give it a try and let me know how you get on, here's a collection of awesome Tailwind to get you started!

 

Hi Mark. I just released RunCSS which is a runtime version of TailwindCSS. See here: dev.to/mudgen/runcss-a-runtime-ver...

I am interested in your thoughts about it.