Class-based dark mode strategy in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Tailwind's class-based dark mode work?

In Tailwind CSS, when using the class-based dark mode strategy, which HTML element should you add the dark class to enable dark styles for the entire page?

A The <code>&lt;body&gt;</code> element

B The <code>&lt;html&gt;</code> element

C The <code>&lt;head&gt;</code> element

D The <code>&lt;main&gt;</code> element

💡 Hint

Think about which element wraps the whole page content and can control styles globally.

In Tailwind's class-based dark mode, adding the dark class to the <html> element allows all child elements to respond to dark mode styles using the dark: prefix.

📝 Syntax

intermediate

Which Tailwind config enables class-based dark mode?

Given this Tailwind CSS configuration snippet, which option correctly enables class-based dark mode?

Tailwind

module.exports = {
  darkMode: ???,
  theme: {
    extend: {},
  },
  plugins: [],
}

A false

B "media"

C true

D "class"

💡 Hint

The value should be a string that tells Tailwind to use a CSS class for dark mode.

Setting darkMode: "class" in the Tailwind config tells Tailwind to apply dark styles only when the dark class is present on an ancestor element.

❓ rendering

advanced

What is the visual output when toggling dark mode class?

Consider this HTML snippet using Tailwind with class-based dark mode enabled:

<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
      Hello, dark mode!
    </div>
  </body>
</html>

What background and text colors will the <div> have when the dark class is present on <html>?

A Background: gray-800, Text: white

B Background: white, Text: black

C Background: gray-800, Text: black

D Background: white, Text: white

💡 Hint

Remember that the dark: prefix applies styles only when the dark class is present.

When the dark class is on <html>, the dark:bg-gray-800 and dark:text-white styles override the default white background and black text, resulting in a dark background with white text.

❓ selector

advanced

Which CSS selector does Tailwind use for class-based dark mode?

When Tailwind generates CSS for class-based dark mode, which selector pattern does it use to apply dark styles?

A .dark &lt;selector&gt; { ... }

B &lt;selector&gt;.dark { ... }

C .dark > &lt;selector&gt; { ... }

D :root.dark &lt;selector&gt; { ... }

💡 Hint

Think about how CSS applies styles when a parent has a class.

Tailwind uses the selector .dark <selector> to apply dark mode styles only when an ancestor has the dark class.

❓ accessibility

expert

How to maintain accessibility when toggling dark mode with classes?

When implementing class-based dark mode toggling in Tailwind, which practice best supports accessibility for keyboard and screen reader users?

A Reload the page to switch between dark and light modes

B Toggle the <code>dark</code> class on <code>&lt;body&gt;</code> without any ARIA attributes

C Toggle the <code>dark</code> class on <code>&lt;html&gt;</code> and update <code>aria-pressed</code> on the toggle button accordingly

D Use JavaScript to add inline styles instead of toggling classes

💡 Hint

Accessibility means informing assistive technologies about state changes.

Adding the dark class on <html> controls styles globally. Updating aria-pressed on the toggle button informs screen readers about the toggle state, improving accessibility.

Practice

1. What does the dark: prefix in Tailwind CSS do when using class-based dark mode?

easy

A. Applies styles only when a parent element has the dark class.

B. Automatically detects system dark mode and applies styles.

C. Adds a dark background color to all elements.

D. Disables all light mode styles on the page.

Solution

1. Step 1: Understand the dark: prefix role

   The dark: prefix in Tailwind applies styles only when the dark class is present on a parent element.

2. Step 2: Compare with other options

   It does not auto-detect system settings or disable light styles; it depends on the dark class presence.

3. Final Answer:

   Applies styles only when a parent element has the dark class. -> Option A

4. Quick Check:

   dark: prefix = styles with dark class [OK]

Hint: Remember: dark: works only if dark class exists [OK]

Common Mistakes:

• Thinking dark: auto-detects system dark mode
• Assuming it changes styles without the dark class
• Confusing dark: with global dark mode toggle

2. Which of the following is the correct way to enable dark mode using class strategy in Tailwind CSS?

easy

A. "darkMode: 'media'" in tailwind.config.js

B. "darkMode: 'class'" in tailwind.config.js

C. Adding dark attribute to body tag

D. Using dark-mode class instead of dark

Solution

1. Step 1: Check Tailwind config for dark mode strategy

   To use class-based dark mode, you must set darkMode: 'class' in tailwind.config.js.

2. Step 2: Eliminate other options

   darkMode: 'media' uses system preference, not class. The dark class must be added manually; no dark attribute exists. The class name must be exactly dark.

3. Final Answer:

   "darkMode: 'class'" in tailwind.config.js -> Option B

4. Quick Check:

   Config setting for class strategy = 'class' [OK]

Hint: Set darkMode to 'class' in config for class-based dark mode [OK]

Common Mistakes:

• Using 'media' instead of 'class' in config
• Adding wrong attribute instead of class
• Using incorrect class name like 'dark-mode'

3. Given this HTML snippet:

<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">Hello</div>
  </body>
</html>

What background and text colors will the <div> have when rendered?

medium

A. Background white, text black

B. Background gray-800, text black

C. Background gray-800, text white

D. Background white, text white

Solution

1. Step 1: Identify presence of dark class

   The <html> tag has the dark class, so all dark: styles apply.

2. Step 2: Apply styles based on class

   The div has bg-white and text-black normally, but with dark:bg-gray-800 and dark:text-white when dark class is present. So background is gray-800 and text is white.

3. Final Answer:

   Background gray-800, text white -> Option C

4. Quick Check:

   Dark class present = dark styles apply [OK]

Hint: If dark class exists, dark: styles override [OK]

Common Mistakes:

• Ignoring the dark class on html
• Mixing normal and dark styles incorrectly
• Assuming no style changes without JavaScript

4. You want to toggle dark mode by adding/removing the dark class on body. Which of these JavaScript snippets correctly toggles dark mode?

medium

A. document.body.setAttribute('dark', true)

B. document.body.toggleClass('dark')

C. document.body.className = 'dark'

D. document.body.classList.toggle('dark')

Solution

1. Step 1: Understand class toggling in JavaScript

   The correct method to toggle a class is classList.toggle('className').

2. Step 2: Check each option

   document.body.classList.toggle('dark') uses classList.toggle('dark'), which is correct. document.body.toggleClass('dark') uses a non-existent toggleClass method. document.body.className = 'dark' overwrites all classes, removing others. document.body.setAttribute('dark', true) sets an attribute, not a class.

3. Final Answer:

   document.body.classList.toggle('dark') -> Option D

4. Quick Check:

   Toggle class method = classList.toggle [OK]

Hint: Use classList.toggle('dark') to switch dark mode on/off [OK]

Common Mistakes:

• Using jQuery method toggleClass in plain JS
• Replacing className instead of toggling
• Setting attribute instead of class

5. You want to create a button that toggles dark mode by adding/removing the dark class on the html element. Which React code snippet correctly implements this using Tailwind's class-based dark mode?

hard

A. const toggleDark = () => { document.documentElement.classList.toggle('dark'); };

return Toggle Dark;

B. const toggleDark = () => { document.body.classList.add('dark'); };

return Toggle Dark;

C. const toggleDark = () => { document.documentElement.setAttribute('dark', 'true'); };

return Toggle Dark;

D. const toggleDark = () => { document.body.className = 'dark'; };

return Toggle Dark;

Solution

1. Step 1: Identify correct element and method for toggling

   Tailwind's class-based dark mode expects the dark class on the html element (document.documentElement). Toggling means adding or removing the class, so classList.toggle is best.

2. Step 2: Evaluate each option

   const toggleDark = () => { document.documentElement.classList.toggle('dark'); }; return Toggle Dark; toggles dark on html correctly. const toggleDark = () => { document.body.classList.add('dark'); }; return Toggle Dark; only adds dark to body (no toggle). const toggleDark = () => { document.documentElement.setAttribute('dark', 'true'); }; return Toggle Dark; sets an attribute instead of class. const toggleDark = () => { document.body.className = 'dark'; }; return Toggle Dark; overwrites all classes on body, removing others.

3. Final Answer:

   const toggleDark = () => { document.documentElement.classList.toggle('dark'); }; return <button onClick={toggleDark}>Toggle Dark</button>; -> Option A

4. Quick Check:

   Toggle dark class on html with classList.toggle [OK]

Hint: Toggle dark class on html using classList.toggle [OK]

Common Mistakes:

• Adding class without toggling
• Using wrong element like body
• Setting attribute instead of class
• Overwriting all classes instead of toggling