What Is Tailwind?

Welcome to the Tailwind CSS course! In the CSS course, you gave pages their look by writing rules into a stylesheet. Tailwind CSS, or Tailwind for short, is another way of writing the same CSS, and today it's one of the most popular tools for styling websites.

To center a heading in the CSS course, you wrote a rule in style.css:

h1 {
	text-align: center;
}

With Tailwind, you don't write the rule. Instead, you give the element a ready-made class, right in the HTML:

<h1 class="text-center">Whiskers Cat Shelter</h1>

The class text-center stands for exactly one declaration: text-align: center. Classes like this are called utility classes: each one does one small thing, usually one CSS declaration. Tailwind has thousands of them, for almost every CSS property and value you know, and you style an element by giving it the classes it needs. That makes Tailwind a CSS framework: a ready-made set of styles that you build your pages from.

Why would anyone write CSS like this?

• You stay in one file. You see how an element looks right where it is in the HTML. No switching to the stylesheet to look for its rule.
• You don't have to name things. No more racking your brain over names like title-background or card for every element you want to style.
• The stylesheet doesn't grow forever. In the CSS course, every new part of a page meant new rules, and old rules stayed in the stylesheet just in case, even when nothing used them anymore. With Tailwind, when you delete an element, its styles are gone with it.

There's a price, though: the HTML gets longer. An element often has five or ten classes, and at first, that may look messy to you. Most people get used to it quickly, and later in the course, you'll learn ways to deal with classes that you repeat a lot.

Tailwind is still CSS: every class stands for CSS declarations you know from the CSS course. So everything you learned there still applies, from the box model to flexbox and grid. You'll just write it differently.

In this course, you'll build the website of a cat shelter called Whiskers. In the editor, you'll find its very first home page: plain HTML, as you know it from the HTML course. Tailwind is already turned on: the file style.css holds a single line, which you'll get to know in the next exercise. Don't be surprised that the heading looks like ordinary text. Tailwind does that on purpose, and you'll find out why later in this lesson.

Above the preview, there's a new bar, Preview width. It can show the page as wide as the screen of a phone, a tablet or a computer. You'll need it mostly in the lesson on responsive design. Until then, leave it on Fit, unless an exercise asks you to try another width.