Dark variant basics
The dark: variant applies a style when the configured dark-mode condition is active. Depending on the Tailwind version and project setup, dark mode can follow the system preference or a class/selector controlled by your application. Confirm the active strategy in your version's documentation.
Do not simply invert every color. Dark themes need a deliberate surface hierarchy: page background, card surface, raised surface, primary text, muted text, borders, and status colors. Shadows may be less noticeable on dark backgrounds, so borders and subtle surface changes often do more work.
A card with light and dark themes
<article class="rounded-2xl border border-slate-200 bg-white p-6 text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
<h2 class="text-lg font-semibold">Workspace summary</h2>
<p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
Your team has completed 42 tasks this week.
</p>
</article>đź’ˇ Light styles are the default.
dark:* utilities override the relevant properties when the dark condition is active. Text and border colors change as well as the surface, preserving a hierarchy instead of changing only the background.Knowledge Check
What is a good dark-mode strategy?