0
0
Tailwindmarkup~5 mins

Background color utilities in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Background color utilities let you quickly change the background color of elements. This helps make your webpage look nice and organized.

To highlight a section with a different background color.
To make buttons stand out with a colored background.
To set a background color for cards or containers.
To improve readability by changing background behind text.
To create color-coded areas for better user experience.
Syntax
Tailwind
bg-{color}-{shade}

Replace {color} with a color name like red, blue, or green.

Replace {shade} with a number like 50, 100, 500, or 900 to pick the shade.

Examples
Sets the background color to a medium red.
Tailwind
bg-red-500
Sets the background color to a light blue.
Tailwind
bg-blue-200
Sets the background color to a very dark green.
Tailwind
bg-green-900
Sample Program

This example shows three elements with different background colors using Tailwind's background color utilities. The section has a light blue background, the button is green, and the warning message has a red background. All use padding and rounded corners for better look and accessibility labels for screen readers.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Color Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section class="bg-blue-100 p-4 rounded" aria-label="Light blue background section">
    <h1 class="text-blue-900 font-bold">Hello with Blue Background</h1>
    <p>This section uses <code>bg-blue-100</code> for a soft blue background.</p>
  </section>

  <button class="bg-green-500 text-white px-4 py-2 rounded mt-6 hover:bg-green-700" aria-label="Submit button">
    Submit
  </button>

  <div class="bg-red-300 p-3 mt-6 rounded" role="region" aria-label="Warning message">
    <strong>Warning:</strong> This is an important message with a red background.
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use hover:bg-{color}-{shade} to change background color when hovering over an element.

Background colors should have enough contrast with text for readability and accessibility.

Tailwind colors come in many shades from 50 (lightest) to 900 (darkest).

Summary

Background color utilities let you quickly add colors behind elements.

Use bg-{color}-{shade} classes to pick colors and shades.

Combine with padding, rounded corners, and accessibility labels for good design.