Turning Tailwind On

Browsers understand only CSS. They've never heard of Tailwind. So where does the CSS for text-center come from? Tailwind is also a program that writes CSS for you, and the line in style.css turns it on:

@import "tailwindcss";

The @import rule brings another stylesheet into yours, here Tailwind's. The page links style.css with the link element in head, just like in the CSS course. When you click Run, the site does this:

1. Tailwind goes through index.html and collects every word that could be a class name.
2. For each word that is one of its classes, such as text-center, it writes a CSS rule. It skips all the other words.
3. The CSS it wrote takes the place of the @import line, and the page gets it through style.css.

So the browser gets a stylesheet with the CSS for exactly the classes your page uses, and nothing more. That's why it never grows by itself: when you delete a class from the HTML, its CSS disappears at the next Run.

On your own computer, a program does this job. In the final project, you'll see how to set it up. Here, the site does it for you.

We've emptied style.css, so Tailwind is off now. The heading still has the class text-center, but it's on the left: nobody wrote the CSS for the class, and a class without CSS does nothing. Notice also how different the page looks: the heading is big and bold, the list has bullets, and the link is blue and underlined. Those are the browser's built-in styles. Watch what happens to them when you turn Tailwind on.