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
    
    



    

Need a 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
    
    



    

Need a 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
    
    



    
        
    
    
        
    
    
        
    

Need a 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
    
    



    

Need a hint?

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