Tailwind CSS, I try it out on the TodoSage website

When building websites it’s so easy to just grab Bootstrap or Foundation and take off running. Better yet, grab a theme off of one of the many theme sites who integrate bootstrap for you and go. Tailwind CSS has always been in the back of my mind as I have a few courses from the author and the people I follow on twitter are friends with them.

While I wasn’t happy with the TodoSage.com site, I decided to give Tailwind CSS a try. I have looked at it a few times but only had big projects that I could use it on. Basically it was just too big of a leap for me to take at the moment.

One of my goals before the new year was to replace the Todo Sage site with a new one that included screenshots. In doing so, I decided to give Tailwind a try as it’s just a few pages.

I have done ‘utility’ style classes in many projects. .pl-15 (padding left 15), mb-10 (margin bottom 10) and much more. Tailwind as built as a utility framework and comes with a lot of classes. To make things easier, they have a config file where you can define colors, margins, and all sorts of things it uses to generate classes. This actually made it really easy to keep ‘on brand’ in the HTML. Here is a purple button, and on hover it should be ‘purple-darker’.

By removing the theme I used in the past, this will make it easier to iterate and try things out.

Things I like about Tailwind

There are a bunch of things I like about Tailwind.

1. The configuration file is well documented with comments inside it. This makes it much easier to understand and doesn’t come across as overwhelming.
2. It just looks good. If you look at the examples and work towards mimicking it at first, it comes out looking pretty decent.
3. Once you understand the ‘formatting’ or ‘syntax’ of the classnames, it’s super easy to use and guess. If you have used ‘font-light’ it’s easy to guess ‘font-bold’.

Things I don’t like while using Tailwind

1. The setup is a bit confusing. You can of course load their CDN version that gets their defaults. But to match what you need, you of course need a local install of it. They provide multiple scenarios, but the install page makes it look scary. I am never confident I have it working until I see that it is.
2. This isn’t on Tailwind, as they provide reasonable defaults, but it’s easy to not remove the stuff you don’t need. The default config comes with black, grey, white, red, orange, yellow, green, teal, blue, indigo and purple. Most of those have darkest, darker, dark, (base), light, lighter, and lightest. If you don’t remove the colors you don’t use, you end up with a lot more classes than you need. This is more of a newbie mistake.
3. The examples are beautiful and a great way to get started, but make sure to remove all the classes you don’t need on the elements. A section that just has text centered probably doesn’t need flex classes. Again, as a newbie mistake, it’s too darn easy to just grab and go.

Bottom line, I like Tailwind and the more I use it, the more I like it. All 3 things I don’t like about it will disappear as I become more familiar with it. It certainly made spinning up a restyle of TodoSage easier and not a 6 month process.

Not sold yet? Follow them on twitter.