Summary

In this lesson, you learned that:

• Tailwind's colors, fonts and other values come from its theme. Each value is a CSS variable, such as --color-orange-500. You add your own in an @theme block after @import "tailwindcss";.
• A variable whose name starts with --color- makes a color for all the color classes: --color-brand-500 gives bg-brand-500, text-brand-500, border-brand-500, hover:bg-brand-500 and others. When you change its value, the color changes everywhere it's used.
• A variable whose name starts with --font- makes a font class: --font-display: "Baloo 2", sans-serif; gives font-display. Your own --font-sans changes the font of the whole page.
• A web font can be loaded in the stylesheet with @import url(...). It must come first, before @import "tailwindcss";: the browser skips an @import after other rules, without an error.
• When a list of classes repeats, write the element once, in a template or a component, or edit all the places at once (Ctrl+D). Otherwise, make your own class: a rule with @apply in @layer components.
• Utility classes win over the components layer, so you can adjust your own class with them: btn px-8.
• An unknown class in @apply stops the whole style.css, and an error appears in red under the preview.
• @utility makes a real utility class, which works with variants, such as md:bg-stripes. A class from @layer components doesn't.
• Arbitrary values are for one-offs. A value that repeats belongs in the theme.

In the next lesson, Final Project, you'll style the whole home page of the shelter on your own, with everything you've learned in this course.

Practice. Oscar is new at the shelter. We've added the label New to his card (a span at the start of the card), and the card now has the class relative, so that the label can be placed on the picture. Make a class of your own for the label, in a second color of the shelter: a green for labels.