What is Tailwind CSS?

4 October 2021

Tailwind CSS is a CSS framework to add styles to a web page without leaving the HTML. In the same document where you mock up the page, you apply the classes you need.

These classes provided by the framework are utility classes. Each one has a specific function. They are like Lego pieces where you use the ones you need.

How Tailwind CSS works?

Let’s see how to use Tailwind CSS with an example: Imagine you have an H1 header, and you want to apply 3 properties: a size of 48px, bold, and centered.

With standard CSS, you would write a class similar to this:

.title {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}Code language: CSS (css)

And you would apply it to your header like this:

<h1 class="title">This is my header</h1>Code language: HTML, XML (xml)

However, with Tailwind CSS you don’t have that separation between HTML and CSS. You have at your disposal all the utility classes (as if they were pieces) for you to use directly in the HTML. So you would do it like this:

<h1 class="text-5xl font-fold text-center">This is my header</h1>Code language: HTML, XML (xml)

The text-5xl class defines a size of 48px
The font-bold class makes the text bold.
The text-center class centers the text.

At first, it’s normal that this string of classes is a bit scary and gives a feeling of clutter.

At first, the solution with standard CSS seems more organized, but when time goes by, after creating the page, if you have to go back and make any modifications, at a glance, you know what the classes do when you use Tailwind CSS. However, with standard CSS, you have to look up the definition of the title class.

No matter how much you read, your mind won’t make that click until you try it. When you’ve been building a page with Tailwind CSS for a while and experience it, you’ll realize its advantages.

What are the advantages over using standard CSS?

You don’t waste energy thinking about class names. Besides, if you choose a bad name, you may need a pretty laborious refactoring later on.
You don’t need CSS files because everything is worked into the HTML.
If you make a change to one page, you won’t break the rest.
There are predefined limits. Although you can set specific values, thanks to the Just-in-Time engine, the classes have predefined values. This makes for good visual harmony.
You can define responsive styles without using media queries.
You can set CSS states without the need to use pseudo-classes.

However, if you have components in your page that use precisely the same classes, you can create a CSS to avoid repeating code. The good thing is that even there, you use the Tailwind CSS classes.

For example, imagine that all the H2 headers of your page have the same styles (something highly recommended), and you don’t like to repeat them. You can define a CSS like this:

.btn {
  @apply text-3xl font-bold text-center;
}Code language: CSS (css)

Then you will only have to use the btn class in each H2 you have. In fact, it would not be necessary to do it this way because there is a more comfortable way that does not require defining classes, but let’s stay with this example to not introduce too many concepts.

As you can see, at the beginning, I used @apply. This is a Tailwind CSS directive so that it knows that what follows are not standard CSS styles but Tailwind CSS utility classes.

Who uses Tailwind CSS?

It is difficult to say which websites are using Tailwind CSS because it is still growing.

But there are top-rated websites already using utility-first frameworks, which is the same approach as Tailwind CSS, such as GitHub, Twitch, Kickstarter, Heroku, or Segment. GitHub, in fact, has its own utility-first framework called Primer.

Video version

https://youtu.be/6Jh5Ruw0uNY

Is Tailwind CSS worth it?

I think so. If you want to see a real example, it’s right in front of you. This website you are visiting is designed with Tailwind CSS.

Suppose you don’t want to waste time researching and studying how to use it by reading its (already quite extensive) documentation. In that case, I have a course where I explain how to install it, how to integrate it with your project, how to make a page from scratch, and how to use its 4 official plugins that will save you a lot of time.

In fact, this article is inspired by the first introductory lesson, which you can watch for free on the course page. I encourage you to take a look because it has many more interesting things that you will be surprised if you don’t know.