My Tailwind CSS origin story

Tomorrow night, I’m attending one of Simon Vrachliotis (simonswiss)‘s Pro Tailwind workshops, so I thought that it would be a good time, as Simon has done himself recently on the Navbar podcast, to describe how I started using Tailwind CSS.

I remember watching a lot of Adam Wathan’s live streams on YouTube before Tailwind CSS, and I remember when he started a new project - a SaaS product called KiteTail.

It was a Laravel and Vue.js project, and although I’m not a Laravel Developer primarily, I got a lot of other information from Adam’s streams about automated testing, test-driven development, and Vue.js as I was learning Vue at the time.

One of the episodes was about styling a card component using some styles that Adam was copying between projects - which would eventually be the starting point for Tailwind CSS.

In fact, I think I watched some of the episode and stopped as I was happy with the Sass and BEM or SMACSS approach that I was using at the time, and didn’t initially see the value of the utility CSS approach that I was seeing for the first time (everyone has a similar reaction initially).

After a while, I did re-visit it but because Tailwind CSS wasn’t released as it’s own project yet, I (like Simon) started to experiment with Tachyons - another utility CSS library.

I rebuilt a particularly tricky component that I’d just finished working on and had caused me some issues, and managed to re-do it in only a few minutes.

I started to use Tachyons on some personal and client projects as a layer on other frameworks like Bootstrap and Bulma, and later moved on to Tailwind CSS once it has been released.

I was working in this way on a project when I released that I could use Tailwind for all of the styling instead of just adding small sprinklings of utilities here and there. I refactored everything and removed the other framework that I’d been using - leaving just Tailwind CSS.

With the exception of some legacy projects, now I use Tailwind CSS exclusively and have used it for a number of projects. I’ve given lunch and learn sessions to teams that I’ve worked on, presented a Tailwind CSS talk at a number of PHP, Drupal, WordPress, and JavaScript events, and maintain a starter-kit theme for using Tailwind in custom Drupal themes.

I’ve also rebuilt a number of existing sites as examples and written some Tailwind CSS related blog posts.

I’m looking forward to attending Simon’s workshop tomorrow and quickly putting that knowledge to use in the next phase of a project that I’m currently working on.