Default color palette and shades in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's Default Blue Shades

Which Tailwind CSS class applies the default blue color at shade 500?

A bg-blue-500

B text-blue-50

C border-blue-900

D hover:bg-blue-100

💡 Hint

Shade 500 is the base color in Tailwind's palette.

In Tailwind CSS, the shade 500 is the base color. The class 'bg-blue-500' applies the blue color at shade 500 as a background.

📝 Syntax

intermediate

Correct Usage of Tailwind Color Shade in Text

Which option correctly applies the Tailwind red color at shade 700 to text?

A border-red-700

B bg-red-700

C hover:text-red-50

D text-red-700

💡 Hint

Text color classes start with 'text-'.

To color text in Tailwind, use the 'text-' prefix followed by the color and shade. 'text-red-700' applies red shade 700 to text.

❓ selector

advanced

Selecting the Correct Tailwind Class for a Light Gray Background

Which Tailwind CSS class applies the lightest gray background from the default palette?

A bg-gray-50

B bg-gray-900

C bg-gray-500

D bg-gray-1000

💡 Hint

Lower shade numbers are lighter colors.

In Tailwind, gray-50 is the lightest gray shade. 'bg-gray-50' applies this light gray as background.

❓ layout

advanced

Using Tailwind Colors in a Responsive Card Layout

You want a card with a green background that changes from shade 300 on small screens to shade 700 on large screens. Which classes achieve this?

A bg-green-700 lg:bg-green-300

B bg-green-700 sm:bg-green-300

C bg-green-300 lg:bg-green-700

D bg-green-300 md:bg-green-700

💡 Hint

Use the 'lg:' prefix for large screens and base class for small screens.

Tailwind applies the base class to all screen sizes. Using 'bg-green-300' for base and 'lg:bg-green-700' overrides it on large screens.

❓ accessibility

expert

Choosing Accessible Tailwind Color Shades for Text Contrast

Which Tailwind text color shade provides the best contrast on a white background for accessibility?

A text-gray-50

B text-gray-900

C text-gray-200

D text-gray-400

💡 Hint

Darker shades provide better contrast on light backgrounds.

For good accessibility, text on white background should be dark enough. 'text-gray-900' is the darkest gray and provides best contrast.

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