Colors and backgrounds

Text and background colors

Tailwind provides color utilities for text, backgrounds, borders, rings, SVG fills and strokes. A typical class such as bg-blue-600 represents a background color while text-slate-700 controls text color.

Opacity and modern color syntax

You can adjust color opacity using the slash syntax, for example bg-black/50. This is useful for overlays and subtle UI surfaces.

Design consistency

Do not choose colors independently for every element. Establish a small semantic palette for primary actions, surfaces, text, borders, success, warning and error states.