Tailwind CSS Course
Tailwind CSS
/
Beginner

Text Colors

Definition

Utilities for controlling the text color of an element.

Explain Like I'm New

The `text-{color}-{shade}` system. Choose a color (red, blue, green), and then choose how dark it is from 50 (almost white) to 900 (almost black).

Real World Example

Using `text-red-500` for a 'Delete Account' warning message, and `text-green-600` for a 'Payment Successful' message.

Common Use Cases

  • •Theming
  • •Validation states (Success/Error)
  • •Disabled states

Interactive Example

Interview Questions

basic

  • Which shade is darker: `text-blue-100` or `text-blue-900`?

intermediate

  • If you just want pure black or pure white text, what classes do you use?

Flash Cards

Question

Which is darker?

Click to reveal answer
Answer

`text-blue-900` (The higher the number, the darker/heavier the color).

Question

Black/White classes?

Click to reveal answer
Answer

`text-black` and `text-white` (They don't need a numerical shade).