DEV Community

Cover image for The One CSS Framework to rule them all
Dylan Britz
Dylan Britz

Posted on • Originally published at dylanbritz.herokuapp.com

 

The One CSS Framework to rule them all

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

Top comments (8)

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

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
Dylan Britz
Collapse
 
roblevintennis profile image
Rob Levin

This is a really good point. I'm surprised that there's not framework today that's using these (TW and maybe a Headless UI as stated). It would be pretty easy to fork and create such a thing for a talented FE / CSS slinger. I'd do it but I'm busy creating my own component library πŸ˜„ πŸ’ͺ -- sounds like maybe Dylan has plans mwa-ha-ha-ha

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

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.

Collapse
 
roblevintennis profile image
Rob Levin

Your guys debate is so typical. I have a feeling we'll always have like two camps. I'm not a huge fan of utilties based approaches but use them sparsely. But, I have to admit: it's hugely popular; folks are creating great stuff with 'em; the JIT removal thingy is very good (although I was bummed to here the rumor about them not giving WindiCSS credit for some of the ideas; I know y'all have ran across that essay yah?)

I'd check out also openprops. Seems like it could be a viable alternative for folks that want to be somewhere in between utitilities vs. component styles. open-props.style/

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.