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><html></code> or <code><body></code>) to enable dark mode styles on child elements using Tailwind's <code>dark:</code> variant.Click to reveal answer
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.Click to reveal answer
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.Click to reveal answer
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.
Click to reveal answer
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><html></code> or <code><body></code> element using JavaScript, for example: <code>document.documentElement.classList.toggle('dark')</code>.Click to reveal answer
In Tailwind CSS, what does setting
darkMode: 'class' in the config do?✗ Incorrect
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?✗ Incorrect
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?
✗ Incorrect
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?
✗ Incorrect
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?
✗ Incorrect
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.
You got /4 concepts.
Describe the advantages of using class-based dark mode compared to media-query based dark mode.
Consider user control and flexibility.
You got /4 concepts.