5 classes you may not know about in the Tailwind universe

Sometimes I am asking myself — how could I avoid burning out, working with CSS as a frontend developer? Writing all this CSS, every time I had to make minor adjustments? Sometimes I would have to create a whole class in another file, just to tweak the styling of a single element.

Thank you, Tailwind. I appreciate you every. single. day.

Even though I’ve been using Tailwind for every project I’ve been working on for more than a year now, there are still showing up some classes, I wish I knew.

In this article, I will share 5 classes, that are worth knowing existing.

Container

The first two classes I will mention are just like we knew from Bootstrap back then.

The Container class is great if you are working on a fixed set of screen sizes. Using container will set the elements max-width to fit the min-width of the current breakpoint.

<div class="container">
  ...
</div>

With Tailwind, the container class will not center the element automatically. If needed, you simply have to add mx-auto.

<div class="container mx-auto">
  I will be horizontally centered
</div>

Columns

I think it is worth mentioning, that columns are actually a CSS property itself. If you wanna read more about the columns property, have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Why I want to mention it in this article, is actually not about the columns class, it is more to show you how easy it makes it to keep columns working on each screen size.

<div class="columns-1 md:columns-2 lg:columns-4">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Using Tailwind, you are working with the mobile-first concept. Therefore, firstly set the count of columns and work up from here. This is one of my favorites since it has become so easy to work in columns — no matter what device you are working on.

Arbitrary values

Alright, enough about layout classes.

Arbitrary values are definitely worth knowing about in the Tailwind universe. Actually, it is kinda like using inline styling — which is not a recommendation of course. It is very bad for maintaining.

But I’ll mention this anyway because there can come situations, where arbitrary values come in handy.

Let’s say that you would like a “Share on Twitter” button in your footer.

You would like it to have the Twitter theme color.

Instead of adding this color to your tailwind.config.js and placing it as a theme color to your app — arbitrary values will save you a lot of time.

<button class="btn bg-[#1da1f2]">
  Share on Twitter
</button>

You see, it is kinda like inline styling, but now you have that single Twitter button, which we are sure is the only element using Twitter color in our app and we prevent adding the color as a theme color.

Divide style

This must be one of my favorites.

Let me show you what could be a frustrating situation, some of us might have once in a while.

<ul class="border">
  <li class="border">...</li>
  <li class="border">...</li>
  <li class="border">...</li>
</ul>

We want to make a list with a line in between each <li>.

Using the example above, you will get the double-width on each border. And you will even have to add the class for each element.

Divide style to the rescue!

<ul class="border divide-y divide-solid">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

This will add a line to each element inside the element using divide. We are telling it to work vertically with divide-y and we will use solid. If you want it dashed, you can change it to divide-dashed.

It also saves you time, because you don’t have to worry about the children inside the list!

And the magic will look like this if you inspect it

.divide-solid > :not([hidden]) ~ :not([hidden]) {
  border-style: solid;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px* var(--tw-divide-y-reverse));
}

Truncate

Now for the last example — the truncate class, which is also a pure timesaver.

Wanna show a text snippet within a container with fixed width? You don’t have to add 3 classes as the example below.

<div class="w-32 overflow-hidden whitespace-nowrap text-ellipsis">
  This is a very very very long text
</div>

With Truncate, this couldn’t get more simple — you just have to know the class exist

<div class="w-32 truncate">
  This is a very very very long text
</div>

And the output will be exactly the same. I know which HTML example I would pick!

Conclusion

Just imagine, if you should write classes for these examples in separated CSS files. Tailwind just removes all the boring parts of the frontend, so you can keep focused on what actually makes the frontend exciting! Well, if you ask me at least.

There are probably still loads of features I am not aware of yet. Please share in the comments, if you have any! I hope you could use one of these examples.