Default color palette and shades in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply the default blue color shade 500 as background.

Tailwind

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

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

Ablue-500

Bred-500

Cgreen-500

Dyellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name without shade like 'blue' only.

Using a shade number not in the palette like 'blue-600'.

Mixing color and shade order incorrectly.

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

2fill in blank

medium

Complete the code to set the text color to the default red shade 700.

Tailwind

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

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

Ared-500

Bred-900

Cred-300

Dred-700

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a lighter shade like 300 instead of 700.

Using background color classes instead of text color.

The class text-red-700 sets the text color to a darker red shade 700 from Tailwind's default palette.

3fill in blank

hard

Fix the error in the code to correctly apply the green shade 400 as border color.

Tailwind

<div class="border-2 border-[1] p-2">Green border</div>

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

Agreen-400

Bgreen-800

Cgreen-200

Dgreen-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using a shade too dark or too light for the intended style.

Omitting the shade number.

The class border-green-400 sets the border color to the green shade 400 from Tailwind's default palette.

4fill in blank

hard

Fill both blanks to create a button with yellow background shade 300 and text shade 900.

Tailwind

<button class="bg-[1] text-[2] px-4 py-2 rounded">Click me</button>

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

Ayellow-300

Byellow-500

Cyellow-900

Dyellow-700

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping background and text color shades.

Using the same shade for both background and text causing poor contrast.

The class bg-yellow-300 sets a light yellow background, and text-yellow-900 sets a dark yellow text color for good contrast.

5fill in blank

hard

Fill all three blanks to create a card with gray background shade 100, border shade 300, and text shade 800.

Tailwind

<div class="bg-[1] border border-[2] text-[3] p-6 rounded-lg">Card content</div>

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

Agray-100

Bgray-300

Cgray-800

Dgray-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same shade for background and border causing low contrast.

Choosing text color too light to read on background.

The card uses bg-gray-100 for a light background, border-gray-300 for a subtle border, and text-gray-800 for readable dark text.

Practice

1. Which Tailwind class applies a medium shade of blue background color?

easy

A. bg-blue-50

B. bg-blue-900

C. bg-blue-500

D. bg-blue-1000

Solution

1. Step 1: Understand Tailwind color shade scale

   Tailwind colors range from 50 (lightest) to 900 (darkest). 500 is the medium shade.

2. Step 2: Identify the correct class for medium blue

   The class bg-blue-500 applies the medium blue background color.

3. Final Answer:

   bg-blue-500 -> Option C

4. Quick Check:

   Medium shade blue = bg-blue-500 [OK]

Hint: Remember 500 is medium shade in Tailwind colors [OK]

Common Mistakes:

• Choosing 50 or 900 thinking they are medium
• Using non-existent shade like 1000
• Confusing text color with background color classes

2. Which of the following is the correct Tailwind class to set text color to a dark red shade?

easy

A. text-red-300

B. text-red-700

C. text-red-50

D. text-red-1000

Solution

1. Step 1: Identify dark shade range in Tailwind

   Dark shades are closer to 700 or 900. Light shades are 50 or 100.

2. Step 2: Pick the class for dark red text

   text-red-700 is a dark red shade suitable for text color.

3. Final Answer:

   text-red-700 -> Option B

4. Quick Check:

   Dark red text = text-red-700 [OK]

Hint: Dark shades are 700 or above in Tailwind [OK]

Common Mistakes:

• Using 300 which is lighter shade
• Using 50 which is very light
• Using invalid shade 1000

3. What background color will the class bg-green-200 apply in Tailwind CSS?

medium

A. An invalid green shade

B. A medium green shade

C. A very dark green shade

D. A light green shade

Solution

1. Step 1: Understand Tailwind green shade numbering

   Lower numbers like 50, 100, 200 are light shades; higher numbers like 700, 900 are dark.

2. Step 2: Interpret bg-green-200

   The class bg-green-200 applies a light green background color.

3. Final Answer:

   A light green shade -> Option D

4. Quick Check:

   Green 200 = light green shade [OK]

Hint: Lower shade numbers mean lighter colors [OK]

Common Mistakes:

• Thinking 200 is medium or dark shade
• Confusing background and text color classes
• Assuming 200 is invalid shade

4. You want to apply a yellow background with a medium shade but wrote bg-yellow-600. The color looks too dark. What is the best fix?

medium

A. Change class to bg-yellow-400

B. Change class to bg-yellow-900

C. Change class to bg-yellow-50

D. Keep bg-yellow-600 and add opacity

Solution

1. Step 1: Understand shade brightness in Tailwind

   600 is a dark shade; 400 is medium; 50 is very light.

2. Step 2: Choose a medium shade for yellow background

   Changing to bg-yellow-400 will give a medium yellow shade, lighter than 600.

3. Final Answer:

   Change class to bg-yellow-400 -> Option A

4. Quick Check:

   Medium yellow = bg-yellow-400 [OK]

Hint: Use 400 for medium shade if 600 is too dark [OK]

Common Mistakes:

• Choosing 900 which is even darker
• Choosing 50 which is too light
• Adding opacity instead of adjusting shade

5. You want to create a button with a blue background that changes from light blue on hover to dark blue when active. Which combination of Tailwind classes is correct?

hard

A. bg-blue-300 hover:bg-blue-500 active:bg-blue-700

B. bg-blue-700 hover:bg-blue-300 active:bg-blue-500

C. bg-blue-500 hover:bg-blue-700 active:bg-blue-300

D. bg-blue-900 hover:bg-blue-500 active:bg-blue-300

Solution

1. Step 1: Understand shade order for blue in Tailwind

   Lower numbers (300) are lighter, higher numbers (700) are darker.

2. Step 2: Match states with correct shades

   Base: light blue (300), hover: medium blue (500), active: dark blue (700).

3. Step 3: Verify class order

   bg-blue-300 hover:bg-blue-500 active:bg-blue-700 matches the requirement.

4. Final Answer:

   bg-blue-300 hover:bg-blue-500 active:bg-blue-700 -> Option A

5. Quick Check:

   Light to dark on hover and active = bg-blue-300 hover:bg-blue-500 active:bg-blue-700 [OK]

Hint: Lower shade number = lighter color; increase on hover/active [OK]

Common Mistakes:

• Reversing light and dark shades in states
• Using darker base color than hover
• Mixing up hover and active shades