Tailwind Dark Mode

Style for dark colour schemes.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

The dark: variant applies a class when dark mode is on:

bg-white dark:bg-slate-900 text-slate-900 dark:text-white

By default it follows the operating system setting (prefers-color-scheme). It can also be switched manually with a class on the <html> element.

Key Takeaways: Tailwind Dark Mode

Mastering Tailwind Dark Mode helps you write clean and reliable Tailwind CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Tailwind Dark Mode Code Example

Tailwind CSS

<script src="https://cdn.tailwindcss.com"></script>

<script>
  tailwind.config = { darkMode: 'class' };
</script>
<div id="box" class="p-8 bg-white dark:bg-slate-900 text-slate-900 dark:text-white transition">
  <p class="mb-4">Click to toggle dark mode.</p>
  <button onclick="document.documentElement.classList.toggle('dark')" class="px-4 py-2 rounded-lg bg-cyan-500 text-white">Toggle</button>
</div>

Free sign-in required · Google login available

Tailwind Dark Mode Practice Exercises

Check what you learned in “Tailwind Dark Mode”.

/ 3 solved

Fill in the blank

Use a dark background in dark mode.

<div class="bg-white ">

✓ Correct! Not quite. Try again.

Multiple choice

By default, what decides whether dark: classes apply?

The operating system colour scheme The time of day The browser width A cookie

✓ Correct! Not quite. Try again.

Code challenge

Give the div bg-white and dark:bg-black.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

❮ Previous

Tailwind Hover, Focus & States

Next ❯

Tailwind Building Components

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

Tailwind Dark Mode

💡 Key Takeaways: Tailwind Dark Mode

Tailwind Dark Mode Code Example

Tailwind Dark Mode Practice Exercises

Key Takeaways: Tailwind Dark Mode