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.
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)
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.
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.
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.
tailwindcss.com/docs/extracting-co...
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
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.
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.
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/