Class-based dark mode strategy in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the class-based dark mode strategy in Tailwind CSS?

It is a method where you add a <code>dark</code> class to a parent element (usually <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code>) to enable dark mode styles on child elements using Tailwind's <code>dark:</code> variant.

beginner

How do you enable dark mode using the class strategy in Tailwind's configuration?

In <code>tailwind.config.js</code>, set <code>darkMode: 'class'</code>. This tells Tailwind to look for a <code>dark</code> class on an ancestor element to apply dark styles.

beginner

How do you write a Tailwind class to style text color differently in dark mode?

Use the dark: prefix before the class. For example, text-black dark:text-white means text is black normally and white in dark mode.

intermediate

Why might you prefer class-based dark mode over media-query based dark mode?

Class-based dark mode lets you control dark mode manually (like with a toggle button), independent of the user's system settings. It offers more flexibility.

intermediate

How can you toggle dark mode on a webpage using the class-based strategy?

Add or remove the <code>dark</code> class on the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element using JavaScript, for example: <code>document.documentElement.classList.toggle('dark')</code>.

In Tailwind CSS, what does setting darkMode: 'class' in the config do?

A Enables dark mode styles when a <code>dark</code> class is present on an ancestor element

B Automatically detects system dark mode preference

C Disables dark mode completely

D Applies dark mode styles only on mobile devices

Setting darkMode: 'class' means Tailwind applies dark styles only when the dark class is added to a parent element.

Which HTML element is commonly used to add the dark class for class-based dark mode?

A <code>&lt;head&gt;</code>

B <code>&lt;footer&gt;</code>

C <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code>

D <code>&lt;nav&gt;</code>

The dark class is usually added to the <html> or <body> element to affect the whole page.

How do you write a Tailwind class to make background blue normally and dark blue in dark mode?

A bg-blue-500 bg-dark:bg-blue-900

B bg-blue-500 dark:bg-blue-900

C bg-blue-500 dark-blue-900

D bg-blue-500 dark:bg-dark-blue-900

The correct syntax uses the dark: prefix: bg-blue-500 dark:bg-blue-900.

What is a benefit of using class-based dark mode over media-query based dark mode?

A It allows manual toggling of dark mode by the user

B It requires no JavaScript

C It automatically matches system preferences

D It disables light mode completely

Class-based dark mode lets you toggle dark mode manually, giving users control regardless of system settings.

Which JavaScript code toggles dark mode using the class-based strategy?

A document.querySelector('html').darkMode = true

B document.body.style.background = 'dark'

C document.getElementById('dark').toggle()

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

Toggling the dark class on document.documentElement (the <html> element) enables or disables dark mode.

Explain how the class-based dark mode strategy works in Tailwind CSS and how you set it up.

Think about how Tailwind knows when to apply dark styles.

Describe the advantages of using class-based dark mode compared to media-query based dark mode.

Consider user control and flexibility.

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