To distinguish buttons from each other, we may need to give them different colors.
Specifically, we'd set a button's background color and text color to make it beautiful.

Tailwind CSS class names are usually composed by 2 parts:

• Prefix: Decide the scope of this class.

  For example:

  • Classes start with bg- changes the background of this element.
  • Classes start with text- changes the text within this element.

• Suffix: Actually apply the style to that scope.

  For example:

  • Classes ends with -black changes the color to black.
    (no matter it's background color or text color)
  • Classes ends with -white changes the color to white.
    (no matter it's background color or text color)

Check these docs for more details:

• Background Color - Tailwind CSS
• Text Color - Tailwind CSS