Tailwind comes with a default color palette. Although you can define your own colors easily, the default color palette is a great starting point to work from.

On this color palette, every colors comes in different shades, ranging from 50 (very light) to 900 (very dark).

In Tailwind, a color is the combination of a color name (here: fuchsia) with a shade.

Text Color

Setting your text to a specific color can be done with the text-{color} utility class. For example, setting text to a medium red color, use text-red-500.

Border Color

Colors can also be used for borders. For example, if you are already using the border-4 utility class, you can make the border dark gray with border-gray-900.

Background Color

Finally, you can set an element's background to a specific color, by using bg-{color}. For example, bg-gray-100 sets an element's background to a light gray.