Summary

In this lesson, we learned that:

• Tailwind CSS is a CSS framework made of utility classes: small classes that each do one thing, usually one CSS declaration. Instead of writing rules in a stylesheet, you give elements classes right in the HTML, such as <h1 class="text-center">.
• Tailwind is turned on by the line @import "tailwindcss"; in style.css, which the page links as usual. When you click Run, Tailwind finds the class names in your HTML and writes CSS for exactly the ones it knows. On your own computer, a program does that.
• An element can have several classes in one class attribute, separated by spaces, in any order. One class can go on any number of elements.
• Preflight, Tailwind's base styles, removes the browser's built-in styles: headings look like plain text, nothing has margins, lists have no bullets, and links look like ordinary text. Everything about the look comes from your classes.
• A class name says what the class does and is mostly made of CSS you know. You can look classes up at tailwindcss.com/docs.
• A misspelled class gives no error, it just does nothing. A mistake in style.css shows in red under the preview, and the page then gets no CSS from Tailwind at all.

The classes from this lesson:

In the next lesson, Colors and Text, you'll get to know Tailwind's color palette and learn to set the size, weight and other properties of text.

Practice: At the bottom of the page, we've added a box with the opening hours: a section element with an h2 heading and a paragraph. Style it with the classes from this lesson.