Hey! Welcome back to one of my posts. This time, I'm excited to write about a tool I've been using a lot and I really like. So much so, that I even did an Unfold Session on it. I'm talking about Tailwind.

Tailwind is a CSS framework based on utilities, and this is nothing else than a fancy word for classes. So basically you use classes to style things! Even though this sounds simple, the framework is really powerful and you have a lot of tools to create really robust CSS, but at the core of everything is a simple class.

This method is not new. It's based on the Atomic CSS approach that favors small, single purpose classes. So, if you wanted to, you could create a single class on your project and keep reusing it over and over.

The thing is, it gets more complicated the more you dig into it. CSS is not only properties. There's breakpoints, states, pseudo-elements, etc. So now you get into a whole issue on how to style your project without having thousands and thousands of classes that you have to memorize.

This is where Tailwind comes in and gives us a hand. This framework gives us the option to not only have a very robust class name directory, but it also gives us the option to use:

Breakpoints

Variants (Hover, Active, Disabled, etc)

Darkmode

I want to give you and idea of how can we style something with Tailwind and the difference it makes if we were to use the old way.

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Using the old way we would need to use classes, then go to our CSS file and add the styles

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

This is using Tailwind. A lot less code, right?!

It must be right if a picture with a generic phrase says it!

I'm not going to go in-depth about the use of Tailwind and what every class does (maybe later) but for now I want you to see the difference this tool makes. But even though I think this framework is great and it's only going to get better and better, it's not perfect. So let's talk about the good, the bad and the (not so) ugly about Tailwind.

Good

No more dumb class names

This is my favorite part about this whole thing. Now I don't have to come up with a class name for a div that only needs a margin.

Reduce your CSS files

Since (almost) everything that you want to style stays inside the html, there is no need to have a lot of files. This makes it easier to update the code in the future. Anyone can just look at the code and make the necessary changes without looking for a class and see where it is being modified.

Stop waiting for the code to compile

No more awful loading times waiting for the code to compile. Since you're using predefined classes, everything has been compiled beforehand. Also, Tailwind offers the Just In Time mode which is an amazing tool.

Work faster

Once you learn the classes, your workflow is going to be much faster and efficient.

Highly customizable

Tailwind offers a lot of resources out of the box, like a spacing scale and  colors, but everything is customizable. You don't have to use what comes as default. You can create a whole new styleguide for every project.

BAD

Learning curve

Since this is an atomic CSS base framework, we have to use classes, and we have to learn those classes, which makes it a little hard to just install the framework and use it. There is a learning curve but, from experience, it's not difficult. Most of the class names that are used have very descriptive or even obvious names

Like, if you want a div to be flex, the class you'll use is flex. So there you go, you already know a Tailwind class.

Not every property has a class

CSS is enormous, so naturally Tailwind is not going to offer a utility for every single CSS property (let's face it, it's not like we use them all either). The good thing is that either we can use normal CSS or use a tailwind plugin (even create one too!)

Not everyone uses Tailwind

This is more for people that already use Tailwind. Why? Because you get so used to getting into a project and writing the classes that it sucks when projects don't use this tool!

(NOT SO) UGLY

"Isn't it just inline styles?"

So this is usually the deal breaker for people when talking about atomic css, and I was one of those people, to be honest with you.

The first time I saw Tailwind was in a Laracon conference. The creator of the framework was talking about the new updates and what was to come. The reason he was in Laracon is because the creator of Laravel loved the framework so much that it came packaged with the newest versions. I watched the conference and It was weird watching him write all of the CSS right there in the HTML. I didn't like at it at first but I was curious.

Later I started seeing more and more updates to this framework and that's when I really got interested. My boss even told me to use it on a project. I decided not to, because I didn't want to use a new technology on a big project but I would use it on a side project that I just started.

To make a long story short, I loved it. The thing that I was worried about, which was using classes on my HTML, wasn't even a problem at at. Yes, the HTML gets bigger but overall your project gets smaller. It's a trade about having more control of your styles to just having more classes. It doesn't get convoluted because there are ways to create new utilities to reduce the amount of classes you can have.

Let me give you an example

<button class="bg-green-500 py-4 px-8 rounded-xl text-white uppercase border-2 border-green-800 transition-all duration-200 hover:bg-blue-500">
  Button
</button>

This would be a style for a button. I added some background color, padding, text color, border, transition and a hover state. Even I can see it's a little long for a button that I will probably use for my whole project, so of course I don't want to have all of that code repeated.

Well this is what you can do

<button class="btn">
  Button
</button>

This is your new HTML

@layout utilities{
    .btn{
        @apply bg-green-500 py-4 px-8 rounded-xl text-white uppercase border-2 border-green-800 transition-all duration-200 hover:bg-blue-500
	}
}

I separate my css into a utilities file, here I can write all of the utilities that I know I'm going to be using during my project. So now I reduce all of the Tailwind classes into just one class, and (this is the great part) I now can add Tailwind classes inside the CSS file. I didn't have to write a single line of custom CSS code and now my code looks cleaner. Which totally negates the thinking about writing "inline styles", now you're using classes like you used to but the difference is that you're still using Tailwind.

So I understand when people get defensive about using atomic CSS, but the only way to really understand it, it's to use it.

Tailwind helped me to stop writing so many styles and helped me focus on what I wanted my components to look like. As with any new practice, it will take a while for you to get used to it. But, once you do, you'll be a faster, better coder. Let me know if you have any questions. Just kidding. Leave me alone.