Applying Dark Variants
Prefix any utility with dark:* to apply a different style in dark mode, covering colors, backgrounds, borders, and shadows.
The dark: Prefix in Action
Once your dark mode strategy is configured, you use the dark: prefix to apply alternative styles in dark mode. Think of it as a conditional: the utility after dark: only activates when dark mode is in effect. You place both the default and dark versions on the same element, and Tailwind generates the correct CSS for both states. This keeps all style logic in one place — the HTML.
<p class="text-gray-900 dark:text-gray-100">
This text is dark on light backgrounds and light on dark backgrounds.
</p>Dark Background Colors
Background color is the most fundamental dark mode concern. Switch from light surfaces like bg-white or bg-gray-50 to dark surfaces like bg-gray-900 or bg-slate-800. Tailwind's color palette provides shades from 50 (lightest) to 950 (darkest), giving you fine-grained control over the exact tone you want in each mode.
<div class="bg-white dark:bg-gray-900 min-h-screen">
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
Layered surfaces for depth in both modes
</div>
</div>
</div>All lessons in this course
- Dark Mode Strategies
- Applying Dark Variants
- Building a Dark Mode Toggle
- Dark Mode for Complex Components