Skip to content

What is Tailwind CSS?

ALT

David Morales

What's Tailwind CSS?

Want to see it in action?

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.

Tailwind CSS utility classes

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)

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?

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

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.

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

Written by

David Morales

Computer Engineer

Teaching my software engineering knowledge in a creative way.

Would you like to get the 10 Ninja Keys of the Developer?

An exclusive PDF for Newsletter subscribers.

You will also be notified of future articles and affordable courses (in the pipeline) that will turn you into a ninja developer.

View privacy information

Leave a reply

Please fill in all fields.

Your email address will not be published.

View privacy information