Colors and Backgrounds

Every color utility in Tailwind follows the same naming pattern, which makes the color system one of the easiest parts to learn even though it has the most possible classes.

The naming pattern

<p class="text-red-600">Error: could not save changes.</p>
<div class="bg-green-50 border border-green-300 text-green-800">Saved successfully.</div>

The pattern is {property}-{color}-{shade}:

• Property: text- (font color), bg- (background), border- (border color), among others like fill- and stroke- for SVG.
• Color: a named hue like red, green, blue, slate, amber.
• Shade: a number from 50 to 950, where lower numbers are lighter and higher numbers are darker.

bg-green-50 is a very pale, near-white green — good for a subtle success banner's background. text-green-800 is a dark, readable green — good for the text sitting on top of that pale background. Pairing a light 50–100 background shade with a dark 700–900 text shade in the same hue is a reliable way to build accessible, readable colored banners without picking colors by eye.

Grays aren't just "gray"

Tailwind ships several gray-ish color families — slate, gray, zinc, neutral, stone — each with a very slightly different undertone (cooler or warmer). Picking one for a project and sticking to it (rather than mixing slate-200 and gray-200 in the same design) is what keeps neutral tones looking intentional instead of slightly mismatched.

Opacity

Any color utility can carry an opacity modifier using a slash:

<div class="bg-black/50">...</div>
<p class="text-slate-900/70">...</p>

bg-black/50 is black at 50% opacity — commonly used for a modal's dark overlay backdrop, where you want to dim the page behind it without hiding it completely. This replaces the older pattern of maintaining separate rgba() values or a whole extra opacity utility.

Gradients

<div class="h-24 bg-gradient-to-r from-purple-500 to-pink-500"></div>

bg-gradient-to-r sets the gradient direction (left to right), and from-*/to-* set its color stops — an optional via-* adds a middle color. Because these are still utilities pulled from the same color scale, a gradient automatically matches the rest of your palette instead of introducing a one-off custom color.

Why the scale beats arbitrary hex codes

Reaching for bg-[#3b82f6] works (arbitrary values are covered later in this course), but it reintroduces the exact problem utility classes are meant to solve: a hex code carries no relationship to the rest of your palette, and two developers picking "close enough" blues by eye will drift apart over time. Using bg-blue-500 everywhere means every blue in the project is literally the same blue, and changing the whole palette later is a one-line theme edit rather than a project-wide find-and-replace.