Dark variant usage in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

How does Tailwind apply styles with the dark variant?

Given the Tailwind class dark:bg-gray-800, what happens when the user switches to dark mode in their system settings?

A The background color never changes because Tailwind does not support dark mode.

B The background color changes to gray-800 automatically without any extra setup when the system is in dark mode.

C The background color changes to gray-800 only if the <code>dark</code> class is present on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element.

D The background color changes to gray-800 only if the element has a <code>dark</code> attribute.

💡 Hint

Think about how Tailwind knows when to apply dark styles.

By default, Tailwind uses the prefers-color-scheme: dark media query to apply dark: variant styles automatically when the user's system is set to dark mode, but only if the dark class is present on the <html> or <body> element when using the 'class' strategy.

❓ rendering

intermediate

What color will the text be in dark mode?

Consider this HTML snippet with Tailwind classes:

<div class="text-black dark:text-white">Hello</div>

What color will the text be when the page is in dark mode and the dark class is on the <html> element?

Tailwind

<div class="text-black dark:text-white">Hello</div>

A The text will be white because the dark variant overrides the base color in dark mode.

B The text will be black because the dark variant does not override the base color.

C The text will be gray because Tailwind blends colors in dark mode.

D The text will be invisible because both colors conflict.

💡 Hint

Remember how CSS specificity works with variants.

The dark:text-white class applies only when the dark class is present on a parent. It overrides the base text-black color, making the text white in dark mode.

❓ layout

advanced

How to change layout spacing in dark mode?

You want to add extra padding to a <section> only when dark mode is active. Which Tailwind class achieves this?

Tailwind

<section class="p-4 ???">Content</section>

A dark-padding-8

B dark:p-8

C dark:p-4

D p-dark-8

💡 Hint

Tailwind uses the dark variant prefix before the utility class.

The correct syntax is dark:p-8 which applies padding 8 only in dark mode. Other options are invalid Tailwind classes.

❓ accessibility

advanced

Why is using dark variant important for accessibility?

Which statement best explains why using Tailwind's dark variant improves accessibility?

A It changes font sizes to larger values in dark mode.

B It automatically adds screen reader labels to dark mode elements.

C It disables animations in dark mode to reduce seizures.

D It ensures text and backgrounds have enough contrast in dark mode for better readability.

💡 Hint

Think about how color contrast affects users with vision difficulties.

Dark variant usage helps maintain good contrast between text and background colors in dark mode, making content easier to read for everyone, including users with low vision.

🧠 Conceptual

expert

How does Tailwind detect dark mode preference by default?

By default, how does Tailwind know when to apply dark variant styles without manually toggling the dark class?

A It uses the <code>prefers-color-scheme</code> media query to detect system dark mode and applies styles automatically.

B It checks the user's browser language settings to decide dark mode.

C It requires JavaScript to detect time of day and toggle dark mode.

D It uses cookies to remember if the user prefers dark mode.

💡 Hint

Think about CSS media queries related to color schemes.

Tailwind's default dark mode strategy uses the prefers-color-scheme media query to detect if the user has set their system to dark mode, applying dark styles automatically without extra JavaScript or manual class toggling.

Practice

1. What does the dark: prefix do in Tailwind CSS?

easy

A. Applies styles only when dark mode is active

B. Applies styles only on hover

C. Applies styles only on small screens

D. Applies styles only when JavaScript is enabled

Solution

1. Step 1: Understand the dark: prefix purpose

   The dark: prefix in Tailwind CSS is used to apply styles only when the website is in dark mode.

2. Step 2: Compare with other prefixes

   Other prefixes like hover: or sm: apply styles on hover or small screens, not related to dark mode.

3. Final Answer:

   Applies styles only when dark mode is active -> Option A

4. Quick Check:

   dark: = dark mode styles [OK]

Hint: Remember dark: means styles for dark mode only [OK]

Common Mistakes:

• Confusing dark: with hover: or responsive prefixes
• Thinking dark: applies styles always
• Not enabling dark mode in config

2. Which of the following is the correct syntax to change text color to white only in dark mode using Tailwind?

easy

A. text-white dark:text-black

B. dark-text-white

C. text-white:dark

D. dark:text-white

Solution

1. Step 1: Identify correct dark mode syntax

   Tailwind uses dark: prefix before the utility class to apply styles in dark mode, so dark:text-white is correct.

2. Step 2: Check other options for syntax errors

   text-white dark:text-black applies white text always and black text in dark mode, which is reversed. Options B and C have invalid syntax.

3. Final Answer:

   dark:text-white -> Option D

4. Quick Check:

   Correct dark mode prefix = dark: [OK]

Hint: Use dark: before utility class, no colon after class [OK]

Common Mistakes:

• Placing :dark after class name
• Using dash instead of colon in dark prefix
• Reversing colors for dark and light modes

3. What will be the background color of the button when dark mode is enabled?

<button class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">Click Me</button>

medium

A. Gray-800 background with white text

B. White background with white text

C. White background with black text

D. Gray-800 background with black text

Solution

1. Step 1: Analyze classes for dark mode

   The button has bg-white and dark:bg-gray-800, so in dark mode background changes to gray-800.

2. Step 2: Analyze text color in dark mode

   Text color is text-black normally and dark:text-white in dark mode, so text becomes white.

3. Final Answer:

   Gray-800 background with white text -> Option A

4. Quick Check:

   dark:bg-gray-800 + dark:text-white = Gray-800 background with white text [OK]

Hint: dark: overrides normal styles in dark mode [OK]

Common Mistakes:

• Ignoring dark: prefix effects
• Mixing text and background colors
• Assuming colors stay same in dark mode

4. You wrote this code but dark mode styles are not applying:

<div class="dark:bg-black bg-white">Content</div>

What is the most likely reason?

medium

A. You should use dark-bg-black instead

B. The order of classes is wrong

C. You forgot to enable dark mode in Tailwind config

D. Dark mode styles only work on buttons

Solution

1. Step 1: Check Tailwind dark mode setup

   Dark mode styles require enabling dark mode in Tailwind config file. Without it, dark: classes won't work.

2. Step 2: Verify class syntax and usage

   Class order does not affect dark mode. dark-bg-black is invalid syntax. Dark mode works on any element, not just buttons.

3. Final Answer:

   You forgot to enable dark mode in Tailwind config -> Option C

4. Quick Check:

   Enable dark mode in config = dark styles work [OK]

Hint: Enable dark mode in config before using dark: classes [OK]

Common Mistakes:

• Not enabling dark mode in tailwind.config.js
• Using wrong class syntax for dark mode
• Thinking dark mode only applies to certain elements

5. You want a card component that has a white background and black text in light mode, but in dark mode it should have a dark gray background and light gray text. Which Tailwind classes achieve this correctly?

<div class="?">Card Content</div>

hard

A. bg-gray-900 text-gray-300 dark:bg-white dark:text-black

B. bg-white text-black dark:bg-gray-900 dark:text-gray-300

C. bg-white dark:bg-gray-900 text-gray-300 dark:text-black

D. dark:bg-white dark:text-black bg-gray-900 text-gray-300

Solution

1. Step 1: Identify light mode styles

   Light mode requires white background and black text, so bg-white text-black are correct for light mode.

2. Step 2: Identify dark mode styles

   Dark mode requires dark gray background and light gray text, so dark:bg-gray-900 dark:text-gray-300 apply these styles in dark mode.

3. Step 3: Check other options for correctness

   bg-gray-900 text-gray-300 dark:bg-white dark:text-black reverses light and dark mode colors. bg-white dark:bg-gray-900 text-gray-300 dark:text-black mixes text colors incorrectly. dark:bg-white dark:text-black bg-gray-900 text-gray-300 places dark mode classes before light mode, which is allowed but colors are reversed.

4. Final Answer:

   bg-white text-black dark:bg-gray-900 dark:text-gray-300 -> Option B

5. Quick Check:

   Light mode white/black + dark mode gray/gray = bg-white text-black dark:bg-gray-900 dark:text-gray-300 [OK]

Hint: Light mode classes first, dark: prefix for dark mode styles [OK]

Common Mistakes:

• Swapping light and dark mode colors
• Placing dark: classes incorrectly
• Using wrong color shades for readability