Opacity modifiers on colors in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a 50% opacity to the background color using Tailwind CSS.

Tailwind

<div class="bg-blue-500 [1]">Hello</div>

Drag options to blanks, or click blank then click option'

Abg-blue-50

Bbg-opacity-50

Ctext-opacity-50

Dopacity-50

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-50 affects the whole element, not just background color.

Using text-opacity-50 affects text color opacity, not background.

In Tailwind CSS, bg-opacity-50 sets the background color opacity to 50%.

2fill in blank

medium

Complete the code to apply 25% opacity to the text color using Tailwind CSS.

Tailwind

<p class="text-red-600 [1]">Warning message</p>

Drag options to blanks, or click blank then click option'

Atext-red-25

Bbg-opacity-25

Copacity-25

Dtext-opacity-25

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-25 changes the whole element's opacity.

Using bg-opacity-25 affects background, not text.

The class text-opacity-25 sets the text color opacity to 25% in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply 75% opacity to the background color.

Tailwind

<div class="bg-green-400 [1]">Success</div>

Drag options to blanks, or click blank then click option'

Abg-opacity-75

Bopacity-75

Ctext-opacity-75

Dbg-green-75

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-75 changes the whole element's opacity, not just background.

Using text-opacity-75 affects text color opacity.

bg-opacity-75 correctly sets the background color opacity to 75% in Tailwind CSS.

4fill in blank

hard

Fill both blanks to create a button with blue background at 40% opacity and white text at 90% opacity.

Tailwind

<button class="bg-blue-600 [1] text-white [2]">Click me</button>

Drag options to blanks, or click blank then click option'

Abg-opacity-40

Btext-opacity-90

Copacity-40

Dbg-opacity-90

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-40 affects the whole button, not just background.

Mixing up background and text opacity classes.

bg-opacity-40 sets background opacity to 40%, and text-opacity-90 sets text opacity to 90%.

5fill in blank

hard

Fill all three blanks to create a card with red background at 60% opacity, black text at 80% opacity, and overall element opacity at 90%.

Tailwind

<div class="bg-red-500 [1] text-black [2] [3]">Card content</div>

Drag options to blanks, or click blank then click option'

Abg-opacity-60

Btext-opacity-80

Copacity-90

Dbg-opacity-90

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-opacity-90 instead of opacity-90 for overall opacity.

Confusing text opacity with overall opacity.

bg-opacity-60 sets background opacity to 60%, text-opacity-80 sets text opacity to 80%, and opacity-90 sets the whole element's opacity to 90%.

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