Tailwind CSS ships with a carefully-curated default color palette.
This palette provides enough colors for you to bring your app to life.
Yet the color choices are limited so you won't get overwhelmed when picking a color.
That's how Tailwind CSS makes your app look more consistent.

In this kata, let's apply these colors to texts first.

Tailwind CSS class names are usually composed by 2 parts:

• Prefix: Decide the scope of this class.

  For example, classes start with text- applies changes to the text within this element.

• Suffix: Actually apply the style to that scope.

  For example, classes end with blue-500 changes the color to rgb(59, 130, 246).

Check these docs for more details:

• Customizing Colors - Tailwind CSS
• Text Color - Tailwind CSS