How do you implement dark mode with Tailwind?

Summary

Use the dark: variant. By default it follows prefers-color-scheme. For a user toggle, define class-based dark mode with @custom-variant dark (&:where(.dark, .dark *)); and toggle the dark class on <html>, setting it in an inline head script (or server-side) to avoid a flash of light theme.

Longer Answer

With semantic colour tokens that switch value under .dark, many components need no dark: classes at all.

Key Points

• dark: variant.
• Media query by default.
• @custom-variant for a toggle.
• Set the class before first paint.

Deep dive: Tailwind CSS in Production: The White Flash in Dark Mode

What interviewers look for

Mentions the flash and how to avoid it.