My first experiences with Tailwind CSS

Hi everyone, confession time: I had never used Tailwind CSS before this week.

And it’s not the end of the world; if you work for a company, they have specific working ways. This means the products they use work for them.

It’s fun to think, oh, something new came out, let’s all start using that, but in reality, this does not happen in companies.

So here I was, missing out on everyone having so much fun with Tailwind CSS.

I did have it on my radar for quite a while, and a recent transition to a new job allowed me to start using Tailwind.

What I was using permalink

Let me start by explaining what I was using before. In my previous job, it was a lot of bootstrap and, towards the end, custom BEM CSS.

Meaning we created custom stylesheets with a custom kind of framework, which made the code very light, and in that company, everyone would understand how to use it.

That was all good and well, but not very effective with onboarding people, and even for me, it was looking for certain classes sometimes.

Why did I switch permalink

Even though I’m a big fan of Pure CSS (No framework) Tailwind seemed to be a perfect bridge.

It’s a non-bloated utility framework. This means we don’t have a pre-defined component, which helps us write faster css.

For example, let’s create a button with a different color on hover.

Tailwind

<a class="text-blue-300 hover:text-blue-500">My link</a>

/* No CSS needed */

Pure css. (You see smaller HTML)

<a class="btn">My link</a>

.btn {
  color: #90cdf4;
}
.btn:hover {
  color: #4299e1;
}

As you can see, both will do the same thing, but it saves us some CSS lines!

See the Pen My first experiences with Tailwind CSS by Chris Bongers (@rebelchris) on CodePen.

Key benefits permalink

So from using it for a week, the main benefits to me seem:

Fast to setup permalink

It’s super fast to get started with Tailwind. Either a CDN load or NPM installs, and you’re good to go. Their docs are also super good, so you can type there what you are looking for and apply that.

Setting up Tailwind for Angular.

Speed permalink

It’s so easy to write your own “components,” sort of speak. The code is readable. It’s so self-explanatory what an element does.

No bloating CSS permalink

You don’t need 20 SCSS files that all have some part of your component.

Easy responsiveness permalink

Another great takeaway from Tailwind is how easy it is too have responsive elements.

The framework is mobile-first, so every normal class is what it would look like from mobile up.

We can then add the following “breakpoint” classes.

• sm: Default on a minimum width of 640px
• md: Default on a minimum width of 768px
• lg: Default on a minimum width of 1024px
• xl: Default on a minimum width of 1280px

With that we can easily add classes like so:

<h1 class="text-sm sm:text-sm md:text-md lg:text-lg xl:text-xl">Title</h1>

This is just an example. We see a different font size if you make your screen smaller and bigger.

Pitfalls of Tailwind permalink

So one of the things I noted very quickly was the repeating classes that didn’t make it extendable at all!

So let’s see we have a couple of buttons in our navigation as such:

<a class="text-xl text-indigo-500 bold hover:text-indigo-700">Link 1</a>
<a class="text-xl text-indigo-500 bold hover:text-indigo-700">Link 2</a>
<a class="text-xl text-indigo-500 bold hover:text-indigo-700">Link 3</a>

Wow, that isn’t very pleasant now; we need to have all those classes three times. Here, my oldskool css would be better!

BUT there is a solution. Tailwind can extend!

So we can define a new class for those elements and render them as such by using @apply.

<a class="indigo-btn">Link 1</a>
<a class="indigo-btn">Link 2</a>
<a class="indigo-btn">Link 3</a>

.indigo-btn {
  @apply bold text-xl text-indigo-500;
}
.indigo-btn:hover {
  @apply text-indigo-700;
}

This will now do the same, making changing and reusing our defined components easier.

Ultimately, it’s all about creating a good mix between not reinventing the wheel and using the utilities we have.

So far, I’m like how quick, and easy Tailwind CSS is!

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter