What’s Tailwind CSS?

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.

Let’s see it 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;
}

And you would apply it to your header like this:

<h1 class="title">This is my header</h1>

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>

• 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;
}

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.

Do you like the idea?

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.

It is available on Udemy: Tailwind CSS — The NEXT Generation of CSS