Bird
Raised Fist0
Tailwindmarkup~5 mins

Background color utilities in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the Tailwind CSS class bg-blue-500 do to an element?
easy
A. Sets the background color to a medium blue shade
B. Sets the text color to blue
C. Adds a blue border around the element
D. Makes the element transparent

Solution

  1. Step 1: Understand the class prefix

    The prefix bg- in Tailwind CSS means background color.

  2. Step 2: Interpret the color and shade

    blue-500 is a medium shade of blue in Tailwind's color palette.

  3. Final Answer:

    Sets the background color to a medium blue shade -> Option A

  4. Quick Check:

    bg- means background color, blue-500 is medium blue [OK]
Hint: Remember bg- means background color, shade number shows darkness [OK]
Common Mistakes:
  • Confusing background color with text color
  • Thinking it adds a border instead of background
  • Assuming it makes element transparent
2. Which of these is the correct Tailwind class to set a red background with shade 300?
easy
A. bg-red_300
B. background-red-300
C. bg-red300
D. bg-red-300

Solution

  1. Step 1: Recall Tailwind background color syntax

    The correct format is bg-{color}-{shade} with dashes.

  2. Step 2: Check each option

    Only bg-red-300 matches the correct syntax exactly.

  3. Final Answer:

    bg-red-300 -> Option D

  4. Quick Check:

    Correct syntax uses dashes between parts [OK]
Hint: Use dashes between bg, color, and shade for correct syntax [OK]
Common Mistakes:
  • Using underscores or no dash between color and shade
  • Writing full words like 'background' instead of 'bg'
  • Missing dash between bg and color
3. What background color will the following HTML element have?
<div class="bg-green-700 p-4">Hello</div>
medium
A. A light green background
B. No background color, only padding
C. A dark green background
D. A medium green background

Solution

  1. Step 1: Identify the background color class

    The class bg-green-700 sets the background color to green with shade 700.

  2. Step 2: Understand shade meaning

    Shade 700 is a darker shade in Tailwind's green palette, so the background is dark green.

  3. Final Answer:

    A dark green background -> Option C

  4. Quick Check:

    Shade 700 means dark color in Tailwind [OK]
Hint: Higher shade numbers mean darker colors in Tailwind [OK]
Common Mistakes:
  • Confusing padding with background color
  • Thinking shade 700 is light instead of dark
  • Assuming no background color without explicit style
4. You want to set a yellow background with shade 400 but your element shows no color. Which class is likely causing the problem?
<div class="bg-yellow400 p-2">Warning</div>
medium
A. bg-yellow400 (missing dash)
B. p-2 (padding class)
C. Missing text color class
D. No closing tag for div

Solution

  1. Step 1: Check the background color class syntax

    The class bg-yellow400 is missing a dash between color and shade.

  2. Step 2: Understand impact of syntax error

    Without the dash, Tailwind does not recognize the class, so no background color is applied.

  3. Final Answer:

    bg-yellow400 (missing dash) -> Option A

  4. Quick Check:

    Background color classes need dashes between color and shade [OK]
Hint: Always use dashes in bg-{color}-{shade} classes [OK]
Common Mistakes:
  • Forgetting dash between color and shade
  • Blaming padding for missing background
  • Ignoring class syntax errors
5. You want a button with a blue background that changes to a lighter blue on hover. Which Tailwind classes correctly achieve this?
<button class="?">Click me</button>
hard
A. bg-blue-400 hover:bg-blue-600 text-white rounded p-3
B. bg-blue-600 hover:bg-blue-400 text-white rounded p-3
C. bg-blue-600 hover:bg-blue-600 text-white rounded p-3
D. bg-blue-400 hover:bg-blue-400 text-white rounded p-3

Solution

  1. Step 1: Understand the base and hover colors

    The base background should be darker blue (shade 600), and hover should be lighter (shade 400) for visible change.

  2. Step 2: Check each option's hover effect

    bg-blue-600 hover:bg-blue-400 text-white rounded p-3 uses bg-blue-600 and hover:bg-blue-400, which means background lightens on hover.

  3. Step 3: Confirm other styles

    Text color white, rounded corners, and padding are good for button style.

  4. Final Answer:

    bg-blue-600 hover:bg-blue-400 text-white rounded p-3 -> Option B

  5. Quick Check:

    Hover lighter than base for visible background change [OK]
Hint: Use hover:bg-{lighter-shade} for lighter hover background [OK]
Common Mistakes:
  • Using same shade for base and hover (no visible change)
  • Making hover darker instead of lighter
  • Forgetting rounded corners or padding for button style