Colors, Backgrounds and Text Utilities

Color is usually the first thing you want to control when styling a page, and Tailwind CSS ships with a beautiful, carefully balanced color palette out of the box. In this lesson you will learn how Tailwind names colors, how to apply them to text, backgrounds, and borders, and how to work with opacity and gradients.

The Tailwind Color Palette

Tailwind includes more than twenty color families such as slate, gray, red, orange, amber, emerald, sky, blue, indigo, violet, and rose. Each family has eleven shades from 50 (lightest) to 950 (darkest):

html

<p class="text-blue-500">Medium blue text</p>
<p class="text-blue-900">Very dark blue text</p>
<div class="bg-emerald-100">A pale green background</div>

The number is the shade: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. A useful rule of thumb is 500-600 for primary actions, 100-200 for subtle backgrounds, and 700-900 for text on light backgrounds.

Text Color and Background Color

text-{color}-{shade} sets the font color: text-red-600
bg-{color}-{shade} sets the background: bg-yellow-100
border-{color}-{shade} colors borders: border-gray-300

html

<div class="border border-gray-300 bg-gray-50 p-4">
  <h3 class="text-gray-900">Card title</h3>
  <p class="text-gray-500">Muted supporting text uses a lighter shade.</p>
</div>

Notice the pattern: dark text (gray-900) for headings, mid-gray (gray-500) for secondary text, and a whisper of gray (gray-50) for the surface. This three-tier system appears in almost every professional UI.

Special Color Values

Beyond the palette, Tailwind provides text-white, text-black, bg-transparent, and text-current (inherits the current color). These are essential for buttons and overlays:

html

<button class="bg-black text-white">Dark button</button>

Controlling Opacity

You can adjust the alpha channel of any color with a slash modifier:

html

<div class="bg-black/50">50% transparent black overlay</div>
<p class="text-blue-600/75">Blue text at 75% opacity</p>

This is perfect for image overlays and glassmorphism effects, and it works on background, text, and border colors alike.

Gradients

Tailwind builds gradients from three utilities: a direction, a starting color, and an ending color:

html

<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white">
  A smooth left-to-right gradient
</div>

Directions include bg-gradient-to-r, bg-gradient-to-b, bg-gradient-to-br, and more. Add via-{color} for a three-stop gradient such as from-indigo-500 via-purple-500 to-pink-500.

Decorated Text

A few more text utilities you will use constantly:

underline, line-through, no-underline for decoration
decoration-wavy decoration-red-500 to style the underline itself
uppercase, lowercase, capitalize for text transform
text-left, text-center, text-right for alignment

Key Takeaways

Colors follow the pattern {property}-{color}-{shade}, with shades from 50 to 950.
Use dark shades for text, mid shades for actions, and light shades for backgrounds.
The / modifier controls opacity: bg-black/50.
Gradients combine bg-gradient-to-* with from-, via-, and to- colors.

Next up: Spacing: Margin, Padding and Sizing, where you will learn the spacing scale that keeps Tailwind layouts consistent.