Next.js Dark Mode with Tailwind CSS v4 in 5 Minutes
A tutorial on DEV Community demonstrates adding dark mode to a Next.js 16 app with Tailwind CSS v4 and next-themes in five minutes. The process starts with installing next-themes via npm. In app/layout.tsx, the app is wrapped in a ThemeProvider with attribute="class", defaultTheme="system", and enableSystem. The suppressHydrationWarning prop is added to the <html> tag to prevent React hydration mismatch flash. Tailwind v4 uses CSS-based configuration, so the dark variant is defined in globals.css with @custom-variant dark (&:where(.dark, .dark *));. This replaces the old darkMode: 'class' in tailwind.config.js. A ThemeToggle component uses the useTheme hook from next-themes to toggle between light, dark, and system themes. The tutorial emphasizes that Tailwind v4's CSS-first approach simplifies setup.
Developers can implement dark mode in Next.js with minimal code and no config file.