Background color utilities in Tailwind - Mini Project: Build & Apply

Background Color Utilities with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that uses background colors to highlight different parts. This is common in websites to separate content visually.

🎯 Goal: Build a webpage with three colored boxes using Tailwind CSS background color utilities. Each box should have a distinct background color and some text inside.

📋 What You'll Learn

Use Tailwind CSS background color utility classes

Create three div elements with background colors: bg-red-500, bg-green-500, and bg-blue-500

Add some text inside each colored box

Use semantic HTML and ensure the page is responsive

💡 Why This Matters

🌍 Real World

Background colors are used in websites to highlight sections, create visual hierarchy, and improve user experience.

💼 Career

Knowing how to use utility-first CSS frameworks like Tailwind CSS is valuable for front-end developers to build fast, responsive, and consistent designs.

1

Create the HTML skeleton with a container

Create a basic HTML5 structure with lang="en", charset="UTF-8", and a meta viewport tag. Inside the body, add a main element with a class container mx-auto p-4.

Tailwind

    
    
    Background Color Utilities
    
    



    

Hint

Remember to include the lang attribute on the html tag and the viewport meta tag for responsiveness.

2

Add three div elements with background color classes

Inside the main element, add three div elements. Give them the Tailwind CSS background color classes bg-red-500, bg-green-500, and bg-blue-500 respectively. Also add p-6 and mb-4 classes to each for padding and spacing.

Tailwind

    
    
    Background Color Utilities
    
    



    

Hint

Use the exact class names bg-red-500, bg-green-500, and bg-blue-500 on the div elements.

3

Add text inside each colored box

Inside each div, add a p element with text describing the color: "This is a red box", "This is a green box", and "This is a blue box" respectively. Use the Tailwind class text-white on each p for good contrast.

Tailwind

    
    
    Background Color Utilities
    
    



    
        
    
    
        
    
    
        
    

Hint

Use the exact text inside each p tag and add the class text-white for readability.

4

Make the boxes responsive with flex layout

Wrap the three colored div boxes inside a section element with Tailwind classes flex flex-col md:flex-row gap-4. This will stack the boxes vertically on small screens and horizontally on medium and larger screens.

Tailwind

    
    
    Background Color Utilities
    
    



    

Hint

Use a section element with the classes flex flex-col md:flex-row gap-4 to make the layout responsive.

Practice

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