#Tailwind CSS Backgrounds

Backgrounds are an important component of building UI visual hierarchy and style. Tailwind provides comprehensive utility classes for controlling background colors, gradients, images, and sizes.

#Background Color

Use bg-{color} utility classes to set an element's background color. You can use the entire color palette defined in tailwind.config.js.

<div class="bg-sky-500 text-white p-4">
  This is a div with a blue background.
</div>

<button class="bg-emerald-500 hover:bg-emerald-600 ...">
  A green button
</button>

You can also use bg-opacity-{amount} to control the opacity of the background color.

<div class="bg-blue-500 bg-opacity-75 ...">...</div>

#Gradient Colors

Tailwind makes it easy to create smooth color gradients. You need to combine three utility classes:

1. Define gradient direction: bg-gradient-to-{direction}

   • bg-gradient-to-t: to top
   • bg-gradient-to-br: to bottom right
   • bg-gradient-to-r: to right (default)

2. Define starting color: from-{color}

3. Define ending color: to-{color}

4. (Optional) Define middle color: via-{color}

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

<!-- A three-color gradient -->
<div class="bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 h-24"></div>

#Background Image

You can use arbitrary values like bg-[url(...)] to set a background image.

<div class="bg-[url('/img/hero-pattern.svg')] h-48">
  <!-- ... -->
</div>

#Background Size, Position, and Repeat

When using background images, you usually need to control their size, position, and repetition.

• Background Size: bg-{size}

  • bg-auto: (default)
  • bg-cover: Scale image to completely cover the element, may crop the image.
  • bg-contain: Scale image to completely fit within the element, may leave empty space.

• Background Position: bg-{position}

  • bg-center: Center
  • bg-top: Top alignment
  • bg-left-bottom: Bottom-left alignment

• Background Repeat: bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y

<div
  class="bg-[url('/img/image.jpg')] bg-cover bg-center bg-no-repeat h-64 rounded-lg"
>
  <!-- A common card background image setup -->
</div>

By combining these background utility classes, you can create rich, colorful, and attractive visual effects for your website and components.