Background color utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to blue using Tailwind CSS.

Tailwind

<div class="bg-[1]-500 p-4 text-white">Blue background</div>

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

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that does not match the desired background color.

Forgetting the shade number like 500.

The class bg-blue-500 sets the background color to a medium blue shade in Tailwind CSS.

2fill in blank

medium

Complete the code to set a light gray background using Tailwind CSS.

Tailwind

<section class="bg-[1]-200 p-6">Light gray background</section>

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

Ablue

Bred

Cgray

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a darker shade like 500 instead of 200 for a light background.

Choosing a different color name than gray.

The class bg-gray-200 applies a light gray background color in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply a red background with Tailwind CSS.

Tailwind

<div class="bg-[1]-600 p-5 text-white">Red background</div>

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

Agreen

Bred

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different color name like blue or green by mistake.

Forgetting the shade number or using an invalid one.

The class bg-red-600 correctly applies a strong red background color.

4fill in blank

hard

Fill both blanks to create a green background with padding and white text using Tailwind CSS.

Tailwind

<div class="bg-[1]-400 p-[2] text-white">Green background</div>

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

Agreen

Bblue

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong color name like blue for the background.

Choosing a padding size that is too small or too large for the example.

The class bg-green-400 sets a medium green background. The class p-6 adds padding of 1.5rem all around.

5fill in blank

hard

Fill all three blanks to create a yellow background with medium padding and black text using Tailwind CSS.

Tailwind

<section class="bg-[1]-300 p-[2] text-[3]">Yellow background</section>

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

Ared

B4

Cblack

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using red instead of yellow for the background color.

Choosing padding that is too small or too large.

Using text color that does not contrast well, like white on yellow.

The class bg-yellow-300 sets a soft yellow background. p-4 adds medium padding. text-black sets the text color to black for good contrast.

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