0
0
Tailwindmarkup~10 mins

Class-based dark mode strategy in Tailwind - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to enable dark mode using a class in Tailwind CSS.

Tailwind
<html class="[1]">
  <body>
    <h1 class="text-black dark:text-white">Hello, world!</h1>
  </body>
</html>
Drag options to blanks, or click blank then click option'
Adark-mode
Bdark
Cnight
Dtheme-dark
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'dark-mode' or other class names instead of 'dark'.
Placing the class on the instead of .
2fill in blank
medium

Complete the Tailwind config to enable class-based dark mode.

Tailwind
module.exports = {
  darkMode: '[1]',
  theme: {
    extend: {},
  },
  plugins: [],
}
Drag options to blanks, or click blank then click option'
A"class"
B"auto"
C"manual"
D"media"
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'media' which relies on system settings.
Using unsupported values like 'auto' or 'manual'.
3fill in blank
hard

Fix the error in the JavaScript code that toggles dark mode by adding or removing the correct class on the <html> element.

Tailwind
const html = document.documentElement;
function toggleDarkMode() {
  if (html.classList.contains('[1]')) {
    html.classList.remove('dark');
  } else {
    html.classList.add('dark');
  }
}
Drag options to blanks, or click blank then click option'
Adark
Bdark-mode
Cnight
Dtheme-dark
Attempts:
3 left
💡 Hint
Common Mistakes
Checking for a different class than the one added or removed.
Using 'dark-mode' or other incorrect class names.
4fill in blank
hard

Fill both blanks to create a button that toggles dark mode on click.

Tailwind
<button onclick="document.documentElement.classList.[1]('[2]')">
  Toggle Dark Mode
</button>
Drag options to blanks, or click blank then click option'
Atoggle
Badd
Cdark
Dremove
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'add' or 'remove' instead of 'toggle'.
Using the wrong class name.
5fill in blank
hard

Fill all three blanks to create a dark mode toggle that saves the preference in localStorage and applies it on page load.

Tailwind
<script>
  const html = document.documentElement;
  const toggle = () => {
    html.classList.[1]('dark');
    if (html.classList.contains('dark')) {
      localStorage.setItem('[2]', '[3]');
    } else {
      localStorage.removeItem('[2]');
    }
  };
  if (localStorage.getItem('[2]') === '[3]') {
    html.classList.add('dark');
  }
</script>
Drag options to blanks, or click blank then click option'
Atoggle
Bdark-mode
Cenabled
Ddark
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'add' or 'remove' instead of 'toggle'.
Using inconsistent localStorage keys or values.
Not applying the class on page load.