Shades

The number of a shade says how light the color is: 50 is almost white, 950 almost black, and around 500 the color is at its most vivid. Light shades are good for backgrounds, dark ones for text.

For backgrounds, Tailwind has classes that start with bg- (background). They set the background-color property and use the same colors and shades as the text- classes:

The pattern is always the same: what gets the color, then the color and its shade. You'll meet it in other classes too, for example for the color of a border.

A light background with dark text of the same color is a common look for small labels, or badges. We'll make one from the word "Playful" under Tiger's age, in emerald, a fresh green that goes well with orange:

Playful

When you choose shades, think about contrast, as in the CSS course: text must stand out clearly from its background. The further apart the two shades, the better. On a light background (50 to 200), use text of shade 700 or darker; on a dark background (800 to 950), text of 200 or lighter. Shades close to each other are hard to read, especially in small text:

Emerald 500 on emerald 100 is hard to read.

Emerald 800 on emerald 100 is easy to read.

That's also why the link got text-orange-700: the big heading is easy to read in the brighter orange-600, but the smaller text of the link needs a darker shade.

Notice that the background of the badge fits tightly around its letters. You'll learn how to add space inside it in the next lesson.