Tailwind CSS: A broad overview

Hello! How is your day going?

Something about me... I had never used a CSS framework before Tailwind! I see a lot of articles explaining different frameworks but never got the urge to try one until now!

I started learning about Tailwind and decided to share what I know!

What will be covered here:

• Tailwind CSS vs Vanilla CSS
• Root styling in Tailwind
• Tailwind CSS vs Inline Styling
• Optimising your Build when using Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your HTML. Now that's the formal definition, what is it exactly and how do you know if you want to try your hands on it?

If you have written vanilla CSS you know it looks like this:

//CSS file
.demo{
  background-color: #000;
  color: #fff;
  padding: 15px;
  text-align: center;
}

//HTML file
<div class="demo"> Styled with Vanilla CSS </div>

And this is what you get for it:

Now, if you don't understand the next piece of code that's okay, but here is what styling it using Tailwind looks like:

<div class="bg-black text-white text-center p-2">Styled with Tailwind CSS</div>

and output:

Now, as you can see there's not much difference between the outputs but when it comes to code?

In Tailwind, you don't need to name a class, style that class in a separate file and then see the output. Just use the utility classes provided by Tailwind and see the output directly!

So if you're thinking

But Neha, this styling is way too simple to judge and the HTML file could get really difficult to look at if there's more styling!

You're right, it is too simple and it can get messy but there are ways to solve this problem and we'll cover them later!

For now, let's understand that simple styling:

Tailwind has base classes that in their roots use CSS styling.

So, when you mention bg-black it is being implemented as: background-color: black

Similarly,

• text-white -> color: white
• text-center -> text-align: center
• p-2 -> padding: 0.5rem

(Note: See how it doesn't use px for padding instead uses the rem unit)

You can check out more in their Documentation.

So, now you have gotten a base idea of how Tailwind is used and what CSS units it uses at its roots. This will help you in getting accustomed to writing these utility classes and also define your own in case you need to override the existing ones.

One advantage of using Tailwind CSS is that since you are styling one tag at a time then if the code breaks or the front-end is somehow messed up, you'll know exactly where to look!

Now again if you're thinking

But Neha, this is exactly how inline styling is applied as well. Why bother learning about Tailwind when I can do that?

You're right, again. But there are limitations of inline-styling that are handled by Tailwind.

• Responsiveness: You cannot add media queries in inline styling but it is possible in Tailwind using Breakpoints like sm, md, lg, and more.
• Pseudo Classes: You cannot apply hover, focus, and such effects on tags using inline-styles while it can be done in Tailwind just like responsive design is handled (hover:, focus:...)

Optimising your Build

If you check out the documentation you'll realise there are a lot of classes that they provide so when you install Tailwind for your project, it installs ALL those utility classes.

You'll probably not need all of those classes and you can purge the unused ones as well! Learn more about it here -> Build your CSS

So, this was a broad overview of Tailwind CSS and its comparison with other ways of styling your project and in the next post, I'll be covering how your code can be less messy by using directives in Tailwind and how to make your own utility classes!

---

Hope you guys enjoyed reading this and learned something new!

Stay tuned for the next article!

If you'd like to connect and have a chat, reach out to me here: Neha Badiani

See ya!