Dark Mode
Learn the dark mode class and how it can be used in modern interfaces.
Learning approach
Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.
Tailwind Example
HTML + Tailwind CSS
<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-white p-6 rounded-2xl">
<h2 class="text-xl font-bold">
Dark Mode Ready
</h2>
<p class="mt-2">
Tailwind supports dark mode utilities.
</p>
</div>
Live Preview
Your Tailwind design will appear here.
Click Run Preview
See the lesson example here.
Test your understanding
Choose the best answer.
What is one major benefit of Tailwind CSS?