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

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

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

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

Hint

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

Practice

1. What does the Tailwind class bg-blue-500/50 do to the background color?

easy

A. Sets the background color to fully opaque blue

B. Sets the background color to blue with 5% opacity

C. Sets the background color to blue with 50% opacity

D. Sets the background color to blue with 100% opacity

Solution

1. Step 1: Understand the opacity modifier syntax

   The slash and number after the color (like /50) means opacity percentage in Tailwind.

2. Step 2: Interpret the number 50

   50 means 50% opacity, so the color is half transparent.

3. Final Answer:

   Sets the background color to blue with 50% opacity -> Option C

4. Quick Check:

   bg-blue-500/50 means 50% opacity [OK]

Hint: Slash number after color means opacity percent [OK]

Common Mistakes:

• Confusing 50 with 5 or 100
• Ignoring the slash and treating as normal color
• Thinking opacity is from 0 to 1 instead of 0 to 100

2. Which of these is the correct Tailwind class to apply 25% opacity on a red background?

easy

A. bg-red-500/25

B. bg-red-500-25

C. bg-red-25/500

D. bg-red-25

Solution

1. Step 1: Recall Tailwind opacity syntax

   Opacity is added after color with a slash, e.g., /25 for 25% opacity.

2. Step 2: Check each option

   Only bg-red-500/25 uses correct slash syntax and valid color code.

3. Final Answer:

   bg-red-500/25 -> Option A

4. Quick Check:

   Slash before opacity number is correct [OK]

Hint: Use slash before opacity number, not dash [OK]

Common Mistakes:

• Using dash instead of slash for opacity
• Putting opacity before color number
• Missing slash entirely

3. What will be the visible opacity of the text if the class text-green-700/75 is applied?

medium

A. 75% opacity (mostly visible)

B. 25% opacity (mostly transparent)

C. 100% opacity (fully visible)

D. 50% opacity (half visible)

Solution

1. Step 1: Understand the opacity value in the class

   The /75 means 75% opacity, so the color is mostly visible but slightly transparent.

2. Step 2: Match opacity to options

   75% opacity means mostly visible, not fully or half transparent.

3. Final Answer:

   75% opacity (mostly visible) -> Option A

4. Quick Check:

   text-green-700/75 means 75% opacity [OK]

Hint: Opacity number after slash equals percent visible [OK]

Common Mistakes:

• Mixing 75 with 25 or 50
• Thinking opacity means darkness instead of transparency
• Ignoring the slash and reading as normal color

4. You wrote bg-yellow-400/110 to set background opacity. What is wrong with this?

medium

A. Opacity must be a decimal like 1.10

B. Slash should be a dash

C. Yellow color does not support opacity

D. Opacity value cannot be more than 100

Solution

1. Step 1: Check valid opacity range

   Opacity in Tailwind must be between 0 and 100 inclusive.

2. Step 2: Analyze the given value 110

   110 is above 100, so it's invalid and will cause no effect or error.

3. Final Answer:

   Opacity value cannot be more than 100 -> Option D

4. Quick Check:

   Opacity max is 100, not above [OK]

Hint: Opacity max is 100, never above [OK]

Common Mistakes:

• Using values above 100
• Confusing slash with dash
• Thinking opacity can be decimal over 1

5. You want a button with a blue background that is fully visible normally but becomes 40% opaque on hover. Which Tailwind classes achieve this?

hard

A. bg-blue-600/100 hover:bg-blue-600

B. bg-blue-600 hover:bg-blue-600/40

C. bg-blue-600 hover:bg-blue-600-40

D. bg-blue-600/40 hover:bg-blue-600

Solution

1. Step 1: Set normal background fully visible

   Use bg-blue-600 for fully opaque blue background (default opacity 100%).

2. Step 2: Set hover background with 40% opacity

   Use hover:bg-blue-600/40 to apply 40% opacity on hover.

3. Step 3: Check other options for correctness

   bg-blue-600/100 hover:bg-blue-600 uses unnecessary /100 and full opacity on hover (no change), bg-blue-600/40 hover:bg-blue-600 reverses opacity states, bg-blue-600 hover:bg-blue-600-40 uses wrong syntax.

4. Final Answer:

   bg-blue-600 hover:bg-blue-600/40 -> Option B

5. Quick Check:

   Normal full opacity, hover with /40 opacity [OK]

Hint: Normal color no slash, hover with slash opacity [OK]

Common Mistakes:

• Using dash instead of slash for opacity
• Setting opacity on normal state instead of hover
• Using /100 opacity unnecessarily