Summary

In this lesson, you learned that:

• Tailwind has a color palette of 26 colors, each in 11 shades from 50 (the lightest) to 950 (the darkest), plus black, white and transparent.
• Color classes follow one pattern: what gets the color, the color and its shade. text-orange-600 sets the color of the text, bg-emerald-100 the color of the background.
• Text is easy to read when the shades of the text and its background are far apart: a light background with dark text, or the other way round.
• The color of the text is inherited, so the colors of the whole page go on body: bg-stone-50 text-stone-800.
• A slash and a number make a color transparent: bg-orange-500/20 is orange at 20% opacity.
• The font sizes go from text-xs (12 px) through text-base (16 px) to text-9xl, in rem, and each one also sets a line height.
• An element should have only one class for each property: replace a class instead of adding a second one. Which of two such classes wins depends on the order in Tailwind's CSS, not on their order in class.
• The weight goes from font-thin (100) to font-black (900); the most common are font-normal, font-medium, font-semibold and font-bold.
• leading- classes set the line height (leading-relaxed for paragraphs), and text-left, text-center, text-right and text-justify the alignment.
• tracking- classes set the space between letters, and uppercase, lowercase, capitalize and normal-case the case of the letters.
• font-sans (the default), font-serif and font-mono choose the font. underline, line-through and no-underline draw or remove a line, decoration- classes set its color and underline-offset- its distance from the text.

Tiger's page now has a warm look of its own: an orange serif name, soft gray text on a light background, a green badge and an orange link. In the next lesson, Spacing and Sizing, you'll learn the classes for space that we've been using on the pages: padding, margins, width and height.

To practice, we've prepared a small box that asks for donations. Style it with what you've learned.