Background Color
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.
- Classes start with
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)
- Classes ends with
Check these docs for more details: