0
0
Tailwindmarkup~10 mins

Media-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 based on user's system preference.

Tailwind
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dark Mode Example</title>
  <script>
    tailwind.config = {
      darkMode: '[1]'
    }
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white dark:bg-gray-900 text-black dark:text-white">
  <h1 class="text-2xl font-bold">Hello, World!</h1>
</body>
</html>
Drag options to blanks, or click blank then click option'
Amedia
Bclass
Cmanual
Dauto
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'class' instead of 'media' will require manual toggling.
Using 'auto' or 'manual' are not valid Tailwind dark mode strategies.
2fill in blank
medium

Complete the class attribute to apply dark mode background color.

Tailwind
<div class="bg-white [1]:bg-gray-800 p-4">
  <p>This box changes color in dark mode.</p>
</div>
Drag options to blanks, or click blank then click option'
Adark
Blight
Cmedia
Dmode
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'light:' or 'media:' instead of 'dark:' will not apply dark mode styles.
Forgetting the colon after the prefix.
3fill in blank
hard

Fix the error in the Tailwind config to enable media-based dark mode.

Tailwind
module.exports = {
  darkMode: '[1]',
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
Drag options to blanks, or click blank then click option'
Aclass
Bmedia
CMedia
DMEDIA
Attempts:
3 left
💡 Hint
Common Mistakes
Using uppercase or capitalized versions causes Tailwind to ignore the setting.
Using 'class' instead of 'media' changes the dark mode strategy.
4fill in blank
hard

Fill both blanks to create a responsive dark mode button with hover effect.

Tailwind
<button class="bg-white [1]:bg-gray-700 text-black [2]:text-white px-4 py-2 rounded">
  Click me
</button>
Drag options to blanks, or click blank then click option'
Adark
Bhover
Cfocus
Dactive
Attempts:
3 left
💡 Hint
Common Mistakes
Mixing up 'focus' or 'active' instead of 'hover' for mouse hover effect.
Using 'class' or 'media' as prefixes in class names.
5fill in blank
hard

Fill all three blanks to create a dark mode card with shadow and rounded corners.

Tailwind
<div class="bg-white [1]:bg-gray-900 [2]shadow-lg [3]rounded-lg p-6">
  <h2 class="text-xl font-semibold">Card Title</h2>
  <p>This card adapts to dark mode.</p>
</div>
Drag options to blanks, or click blank then click option'
Adark
Bhover
Cfocus
Dactive
Attempts:
3 left
💡 Hint
Common Mistakes
Confusing 'focus' with 'active' or 'hover'.
Using 'media' or 'class' as prefixes in class names.