DEV Community

loading...
Cover image for The One CSS Framework to rule them all

The One CSS Framework to rule them all

britzdylan profile image Dylan Britz Originally published at dylanbritz.herokuapp.com ・3 min read

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

Discussion (6)

pic
Editor guide
Collapse
adamalicki profile image
Adam

I've been using Tailwind in a side project for a few months. It's been amazing so far. my ONLY complaint to date, is that the official UI components are behind a paid wall, and finding code examples elsewhere can sometimes be challenging.

I'm all for generating revenue and helping fund the amazing teams behind amazing projects. Having dealt with Bulma and Bootstrap for many years, the fact you could find nearly any component or UI or element for free or in the docs spoiled me a bit.

Collapse
britzdylan profile image
Dylan Britz Author

What you looking for are not the paid UI components. They are working in a free uI library for each major JS framework similar to what Bootstrap or Material UI has. It's still very early in development but it will be free.

Collapse
mrkbr profile image
Mario Kober

I know that some people like it but I looked into it and if I see 10 or more classes in a div I think they might have lost control over their lives. This is not how css should work for me and this is not the right concept. This is just my opinion and this is why 99% of all frameworks go a different way. I will never use something that makes my code look so bad. And it looks bad if you use Tailwind.

Thread Thread
britzdylan profile image
Collapse
mrkbr profile image
Mario Kober

It is so ugly. People got mad about writing performant and beautiful code. Then there is Tailwind that forces some devs to totally uglify the source to death. I would never use something that is so terribly bad by design.

Collapse
britzdylan profile image
Dylan Britz Author

II disagree, it has great built in methods to purge your css, or even consolidate your class names to keep your code clean. It's the most performance Friendly framework I've ever seen.