What is Tailwind CSS?

Tailwind CSS is a system where the classes you list in your HTML decide the styling. The class names look like incantations at first, but what it really is is very simple: names given to tiny CSS rules ahead of time.

This course is written for someone who has learned plain CSS, from the angle of “doing the same thing a different way.” Your CSS knowledge carries over directly, so you don’t need to brace for a new language.

The same thing, written twice

Let’s make one white card. First in plain CSS.

<div class="card">
  <p class="card__title">Shima</p>
  <p>A baby long-tailed tit. Currently learning HTML and CSS.</p>
</div>

.card {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card__title {
  font-size: 18px;
  font-weight: bold;
}

The same thing in Tailwind:

<div class="p-4 bg-white rounded-xl shadow-md">
  <p class="text-lg font-bold">Shima</p>
  <p>A baby long-tailed tit. Currently learning HTML and CSS.</p>
</div>

Not one line of CSS was written. The class names are the declarations.

One class, roughly one declaration. That’s all a “utility class” is.

What it really is: just CSS

To prove there’s no magic, let’s define by hand only the classes used above—no Tailwind at all.

.p-4 { padding: 1rem; }
.bg-white { background-color: #fff; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-md { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }

Six lines. And with that CSS, the Tailwind HTML above works unchanged. The demo below is exactly that, running.

What Tailwind does is that same work, prepared in advance for several thousand classes. That’s it. Think of it as a large table of aliases, not a new technology.

What actually changes

Changing how you write changes how the work feels. Three things.

1. You stop naming things

In plain CSS you can’t write anything until you’ve named it. “Is this card’s title .card__title or .card-title?” stops you every time. Tailwind removes the naming step entirely.

2. The HTML shows you the styling

With plain CSS you have to open the stylesheet to ask “what’s on .card anyway?” Tailwind has it all in the HTML, so the back-and-forth disappears.

3. Deleting stops being scary

The scariest thing in plain CSS is not being able to delete unused CSS. “Is this .card used anywhere?” can’t be answered with confidence, so you keep it, and the stylesheet grows fat.

A Tailwind class only affects the element it’s on, so deleting the HTML deletes the styling. That ability to delete is the benefit that matters most on a site you maintain for years.

What you give up

It isn’t all upside. Let’s be straight about it up front.

• The HTML gets long—ten classes in a row is routine. “Hard to read” is a fair criticism
• You repeat the same sequences—five buttons means writing the same list five times (we cover the answer later)
• You can’t use it without knowing CSS—knowing p-4 is padding comes from knowing CSS. It’s no shortcut
• It needs a build—something has to collect the classes you used and write out the CSS

How this course goes

Every step is compared one-to-one with plain CSS.

1. Getting it running—setting up something you can try on your own machine (we do this first)
2. Reading class names—what the 4 in p-4 is, what the 500 in a colour is (the rules cut the memorisation enormously)
3. Layout—writing Flexbox and Grid as utilities
4. Screen width and state—how the md: and hover: prefixes work
5. Deciding—when it pays off and when it costs you

You will definitely hit moments of “plain CSS would be faster here.” Being able to make that call is the goal of this course.

Summary of this lesson

1. Tailwind is names given to tiny CSS rules—one class, roughly one declaration
2. The contents are just CSS; six hand-written lines reproduce the same look
3. The real win isn’t speed, it’s deletability—your CSS stops growing fat
4. In exchange, the HTML gets long. That’s a trade-off, not a matter of taste
5. You can’t use it without knowing CSS—it’s a different way of writing, not a shortcut

Next we get something running on your machine first. Being able to type it and see for yourself beats reading by a wide margin.