Dark Mode Colors

Definition

Using the `dark:` variant to specify alternative text and background colors when the user's operating system or app is in Dark Mode.

Explain Like I'm New

It's literally magic. `bg-white dark:bg-gray-900`. If the user's iPhone is in Light Mode, the box is white. If they flip their iPhone to Dark Mode, Tailwind instantly changes the box to dark gray.

Real World Example

Creating a Card component: `<div class="bg-white text-black dark:bg-slate-800 dark:text-white">`.

Common Use Cases

•Supporting modern OS preferences
•Night-reading modes

Interactive Example

Interview Questions

basic

What variant prefix do you put in front of a class to make it apply ONLY in dark mode?

intermediate

Do you have to write a separate CSS file or `@media` query to make dark mode work in Tailwind?

Flash Cards

Question

Prefix?

Click to reveal answer

Answer

`dark:`

Question

Separate CSS file?

Click to reveal answer

Answer

No! That is the beauty of Tailwind. You write the light and dark styles directly on the HTML element side-by-side. Tailwind generates the complex `@media (prefers-color-scheme: dark)` CSS rules for you under the hood.