Background color utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class sets a blue background with 50% opacity?

You want to apply a blue background color that is half transparent. Which class will do this correctly?

A bg-blue-500 bg-opacity-50

B bg-blue-500 opacity-50

C bg-opacity-50 bg-blue-500

D opacity-50 bg-blue-500

💡 Hint

Remember that background opacity is controlled by a separate utility in Tailwind.

The bg-blue-500 class sets the blue background color. The bg-opacity-50 class sets the background opacity to 50%. Using opacity-50 changes the opacity of the entire element, including text and borders, which is not what we want.

❓ rendering

intermediate

What background color will this Tailwind class produce?

Given the class bg-gradient-to-r from-red-400 via-yellow-300 to-green-500, what will the background look like?

Tailwind

<div class="bg-gradient-to-r from-red-400 via-yellow-300 to-green-500 h-24 w-full"></div>

A A solid red background

B A horizontal gradient from red to yellow to green

C A vertical gradient from red to yellow to green

D A horizontal gradient from green to yellow to red

💡 Hint

The to-r means the gradient goes to the right (horizontal).

The class bg-gradient-to-r creates a gradient background that moves horizontally from left to right. The colors start at red-400, pass through yellow-300 in the middle, and end at green-500 on the right.

🧠 Conceptual

advanced

Why should you prefer bg-opacity over opacity for background transparency?

Consider you want only the background color to be transparent but keep text fully visible. Which is the best reason to use bg-opacity instead of opacity?

A <code>bg-opacity</code> changes only background transparency, <code>opacity</code> affects the whole element including text and children

B <code>opacity</code> cannot be combined with background colors

C <code>bg-opacity</code> is faster to load in browsers

D <code>opacity</code> only works on images, not backgrounds

💡 Hint

Think about what parts of the element you want to see clearly.

The bg-opacity utility changes only the transparency of the background color, leaving text and other content fully visible. The opacity utility changes the transparency of the entire element, including text and child elements, which is usually not desired.

❓ layout

advanced

How to make a full-screen background color with Tailwind?

You want a background color that covers the entire browser window, even if the content is small. Which combination of classes achieves this?

A w-full h-full bg-blue-200

B h-full bg-blue-200

C min-h-screen bg-blue-200

D max-h-screen bg-blue-200

💡 Hint

Think about minimum height to fill the screen regardless of content size.

The min-h-screen class sets the minimum height to 100% of the viewport height, ensuring the background color covers the full screen even if content is small. h-full depends on parent height and may not fill the viewport if parents have no height.

❓ accessibility

expert

Which Tailwind background color utility best supports accessibility for text readability?

You want to ensure your background color provides enough contrast for text to be easily readable by all users. Which Tailwind background color class is best to use with white text for accessibility?

Tailwind

<div class="bg-??? text-white p-4">Accessible Text</div>

A bg-blue-100

B bg-yellow-200

C bg-pink-300

D bg-gray-900

💡 Hint

Dark backgrounds with light text usually have better contrast.

bg-gray-900 is a very dark background color that provides strong contrast with white text, making it easier to read for users with visual impairments. Lighter backgrounds like yellow-200 or blue-100 do not provide enough contrast with white text.

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