The One CSS Framework to rule them all

Subscribe to my newsletter and never miss my upcoming articles

Everyone once in while there comes a person, tech or thing. That just dominates its domain. I predict Tailwind CSS will be another one.

What are CSS frameworks

CSS frameworks are specific libraries that either speed up our workflow or enhance it. Usually, frameworks come with a lot of predefined styles or components that are ready to use. They are very opinionated in the way they are designed and how they should be used by developers. Nonetheless, they are handy and can save a lot of time when used right! One of the oldest CSS frameworks is bootstrap!

Tailwind CSS

So today I want to specifically talk about one that has been making an uproar in the dev community. Tailwind, Adam Wathan released v0.1.0 on Nov 1, 2017, Here is the timeline, and it is now officially at v 2.0. So why am I talking about tailwind? Because I believe that it is hands down one of the best and most unopinionated CSS frameworks/libraries ever made.

How does it work?

Very simple, let's say you have an h1 tag and you want to change the colour to green. In its class name just add text-green-500. Ok, I know it's not amazing! Sure other frameworks can do that as well. You see what the creator of tailwind did was, he took the time and created a massive CSS stylesheet with thousands of predefined classes to add common CSS styling and layout options to your markup.

Why is it so good?

Let's take an example: You have a container, inside you have three icons. Now you want to add a flexbox that doesn't wrap and is spaced out evenly. Some frameworks have a utility class that does all that for you with one class name. Ok, that is great, but what if you decide you want it to be at the start of the flexbox and each item should have some padding. Now you see with framework x you would either need to go and your own styling and try and overwrite the frameworks default styles, that's just messy and too much work. Instead, With Tailwind all you have to do is add or remove each class that lets you find that perfect layout. Need to add padding to each icon? There's a class for that. Need to move the flexbox items to the start? Sure there's a class for that, want to add margin around the container? Sure there's a class for that, see what I am getting at here? The simplicity of just adding or removing class names to create UI components or full-page layouts is unprecedented to anything out there.

Get started with Tailwind CSS

Getting up and running with Tailwind is very easy. Their documentation provides enough explanation to get started in HTML, React, VueJS, Gatsby & Laravel. I won't explain any of that here instead check it out.

Documentation - Tailwind CSS

Tailwind Extra's

Tailwind comes with a few extra goodies outside of its framework and here are a list of some of them:

If you love tailwind as much as I do hit up Adam (Taiwlind creator) on twitter

Comments (2)

Chidera Ugo's photo

My mind was blown the first time I tried tailwind. Adam's a genius. Thanks Dylan for this article.

Dylan Britz's photo

Only a pleasure