Pairing light and dark colors in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use different colors for light and dark modes?

When designing a website with Tailwind CSS, why is it important to pair different colors for light and dark modes instead of using the same colors for both?

A Because using the same colors for both modes will cause the website to load slower.

B Because Tailwind CSS requires different colors for light and dark modes to compile correctly.

C Because dark mode disables all colors except black and white.

D Because colors that look good on a light background may not be visible or comfortable on a dark background.

💡 Hint

Think about how colors appear on different backgrounds and how that affects readability.

Colors that work well on light backgrounds can be hard to see or cause eye strain on dark backgrounds. Pairing colors thoughtfully ensures good contrast and readability in both modes.

📝 Syntax

intermediate

Tailwind syntax for dark mode background color

Which Tailwind CSS class correctly sets a background color of gray-100 in light mode and gray-900 in dark mode?

A bg-gray-100 dark:bg-gray-900

B bg-gray-900 dark:bg-gray-100

C bg-gray-100 bg-dark:bg-gray-900

D bg-gray-100 dark-gray-900

💡 Hint

Remember the syntax for applying styles in dark mode uses the 'dark:' prefix.

In Tailwind, the 'dark:' prefix applies styles when dark mode is active. So 'bg-gray-100 dark:bg-gray-900' means light mode uses gray-100 and dark mode uses gray-900.

❓ rendering

advanced

Visual result of paired text colors in light and dark modes

Given the following Tailwind classes on a paragraph: text-gray-800 dark:text-gray-200, what will the text color be when the user switches to dark mode?

Tailwind

<p class="text-gray-800 dark:text-gray-200">Hello, world!</p>

A The text color stays dark gray (gray-800) even in dark mode.

B The text color changes to a light gray (gray-200) on a dark background.

C The text color becomes black in dark mode.

D The text color becomes invisible in dark mode.

💡 Hint

Check how the 'dark:' prefix changes styles when dark mode is active.

The 'dark:text-gray-200' class overrides the light mode text color when dark mode is active, making the text a lighter gray for better contrast on dark backgrounds.

❓ selector

advanced

Choosing the best Tailwind color pair for button backgrounds

Which Tailwind CSS class pair best ensures a button background is visually distinct and accessible in both light and dark modes?

A bg-blue-300 dark:bg-blue-500

B bg-white dark:bg-black

C bg-gray-100 dark:bg-gray-200

D bg-blue-500 dark:bg-blue-300

💡 Hint

Think about which colors provide enough contrast on light and dark backgrounds.

Using a lighter blue (blue-300) in light mode and a darker blue (blue-500) in dark mode ensures the button stands out clearly in both modes.

❓ accessibility

expert

Ensuring text contrast meets accessibility standards in dark mode

You have a paragraph with class text-gray-400 dark:text-gray-600. What accessibility issue might this cause when switching to dark mode?

A Text will become bold automatically in dark mode.

B Text color will not change in dark mode, causing confusion.

C Text contrast will be too low in dark mode, making it hard to read.

D Text will be too bright in dark mode, causing eye strain.

💡 Hint

Consider how gray-600 looks on a dark background compared to gray-400 on a light background.

Gray-600 is a medium gray that may not have enough contrast on a dark background, making text difficult to read and failing accessibility guidelines.

Practice

1. Which Tailwind color pairing is best for readability on a light background?

easy

A. Use bg-gray-200 with text-gray-300

B. Use bg-white with text-white

C. Use bg-black with text-black

D. Use bg-white with text-black

Solution

1. Step 1: Understand light background with dark text

   Light backgrounds like white need dark text for clear contrast.

2. Step 2: Match Tailwind classes for this pairing

   bg-white is light background, text-black is dark text, making text easy to read.

3. Final Answer:

   Use bg-white with text-black -> Option D

4. Quick Check:

   Light background + dark text = Use bg-white with text-black [OK]

Hint: Light background needs dark text for best contrast [OK]

Common Mistakes:

• Using light text on light background
• Using dark background with dark text
• Ignoring contrast for readability

2. Which Tailwind class combination correctly pairs a dark background with light text?

easy

A. bg-gray-100 text-gray-900

B. bg-black text-white

C. bg-white text-gray-200

D. bg-yellow-50 text-yellow-100

Solution

1. Step 1: Identify dark background and light text classes

   bg-black is a dark background, text-white is light text.

2. Step 2: Confirm correct pairing

   This pairing ensures good contrast and readability on dark backgrounds.

3. Final Answer:

   bg-black text-white -> Option B

4. Quick Check:

   Dark background + light text = bg-black text-white [OK]

Hint: Dark background pairs with light text for clarity [OK]

Common Mistakes:

• Using light background classes with dark text
• Mixing similar light colors causing low contrast
• Confusing background and text classes

3. What will be the visible text color on a bg-gray-900 background with text-gray-300 in Tailwind?

medium

A. Light gray text, readable on dark background

B. Black text, invisible on dark background

C. White text, very bright

D. Very dark gray text, hard to read

Solution

1. Step 1: Understand the background color bg-gray-900

   This is a very dark gray background, almost black.

2. Step 2: Understand the text color text-gray-300

   This is a light gray color, which contrasts well on dark backgrounds.

3. Final Answer:

   Light gray text, readable on dark background -> Option A

4. Quick Check:

   Dark background + light gray text = Light gray text, readable on dark background [OK]

Hint: Dark background with light gray text is readable [OK]

Common Mistakes:

• Assuming gray-300 is dark text
• Confusing gray scale numbers for lightness
• Ignoring contrast importance

4. Identify the error in this Tailwind pairing: bg-white text-gray-100

medium

A. Text color is too light on white background, low contrast

B. Background color is too dark for the text

C. Classes are missing the hover: prefix

D. Text color and background color are the same

Solution

1. Step 1: Analyze background color bg-white

   This is a very light background.

2. Step 2: Analyze text color text-gray-100

   This is a very light gray, close to white, causing poor contrast.

3. Final Answer:

   Text color is too light on white background, low contrast -> Option A

4. Quick Check:

   Light background needs darker text for readability [OK]

Hint: Check contrast: light background needs dark text [OK]

Common Mistakes:

• Ignoring contrast and choosing similar light colors
• Thinking hover prefix affects color pairing
• Confusing same color with low contrast

5. You want a button with a dark background and light text that changes to a light background with dark text on hover using Tailwind. Which class set is correct?

hard

A. bg-white text-black hover:bg-black hover:text-white

B. bg-gray-100 text-gray-800 hover:bg-gray-800 hover:text-gray-100

C. bg-gray-800 text-gray-100 hover:bg-gray-100 hover:text-gray-800

D. bg-black text-black hover:bg-white hover:text-white

Solution

1. Step 1: Identify dark background and light text classes

   bg-gray-800 is dark background, text-gray-100 is light text.

2. Step 2: Check hover classes for light background and dark text

   hover:bg-gray-100 is light background, hover:text-gray-800 is dark text, matching the requirement.

3. Final Answer:

   bg-gray-800 text-gray-100 hover:bg-gray-100 hover:text-gray-800 -> Option C

4. Quick Check:

   Dark bg + light text, hover reverses colors = bg-gray-800 text-gray-100 hover:bg-gray-100 hover:text-gray-800 [OK]

Hint: Hover classes reverse bg and text colors for effect [OK]

Common Mistakes:

• Swapping hover text and background colors incorrectly
• Using same colors for bg and text causing invisibility
• Forgetting to add hover: prefix