Opacity modifiers on colors in Tailwind - Mini Project: Build & Apply

Opacity Modifiers on Colors with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that shows colored boxes. You want to learn how to use Tailwind CSS opacity modifiers to make colors partly see-through.

🎯 Goal: Build a webpage with three colored boxes using Tailwind CSS. Each box uses the same base color but with different opacity levels using Tailwind's opacity modifiers.

📋 What You'll Learn

Use Tailwind CSS classes to set background colors

Apply opacity modifiers to the background colors

Create three boxes side by side with different opacity levels

Use semantic HTML and accessible markup

Make the layout responsive

💡 Why This Matters

🌍 Real World

Opacity modifiers help create visually appealing designs by adjusting color transparency, useful in buttons, backgrounds, overlays, and more.

💼 Career

Understanding Tailwind CSS utilities like opacity modifiers is valuable for frontend developers to build modern, responsive, and accessible user interfaces quickly.

1

Create the HTML structure with three boxes

Write the HTML skeleton with a <main> element containing three <div> elements. Each <div> should have the class box. Do not add any Tailwind classes yet.

Tailwind

Need a hint?

Use three <div> tags inside <main>. Each <div> must have the class box.

2

Add Tailwind base color and size classes to boxes

Add Tailwind CSS classes to each box <div> to set the background color to bg-blue-500, width to w-24, height to h-24, and margin to m-2. Do this for all three boxes.

Tailwind

Need a hint?

Add the classes bg-blue-500 w-24 h-24 m-2 to each div with class box.

3

Apply different opacity modifiers to each box

Add Tailwind opacity modifiers to the background color classes for each box: the first box uses bg-opacity-100, the second uses bg-opacity-60, and the third uses bg-opacity-30. Keep the other classes unchanged.

Tailwind

Need a hint?

Add bg-opacity-100 to the first box, bg-opacity-60 to the second, and bg-opacity-30 to the third box.

4

Make the boxes appear side by side with flexbox

Add the Tailwind class flex to the <main> element to arrange the three boxes horizontally in a row.

Tailwind

Need a hint?

Add the class flex to the <main> tag to place boxes side by side.