Dark mode in Tailwind CSS allows you to create themes that adapt to user preferences or system settings. It provides first-class support for building dark/light theme switching with minimal effort.

Tailwind offers multiple strategies for implementing dark mode, from simple class-based approaches to more sophisticated system preference detection.

Tailwind CSS supports three main dark mode strategies:

• Media Strategy: Uses @media (prefers-color-scheme: dark) - respects system preference
• Class Strategy: Uses .dark class on ancestor - manual toggle
• Selector Strategy: Uses CSS selector - programmatic control

The media strategy automatically adapts to the user's system preference:

• Respects OS-level dark mode setting
• No JavaScript required
• Automatic switching based on system preference
• Best for accessibility and user experience

The class strategy gives you full control over when dark mode is active:

• Add dark class to enable dark mode
• Remove dark class to disable dark mode
• Perfect for manual toggle buttons
• Can be controlled with JavaScript

The selector strategy allows programmatic control over dark mode:

• Target specific containers for dark mode
• Multiple dark mode sections on one page
• JavaScript control for complex scenarios
• Custom selector configuration

Use the dark: prefix to apply styles only in dark mode:

• dark:bg-gray-900 - Dark background only
• dark:text-white - Light text only in dark mode
• dark:border-gray-700 - Dark border only
• dark:hover:bg-gray-700 - Dark hover state
• dark:focus:ring-blue-500 - Dark focus ring

Add smooth transitions when switching between themes:

• transition-colors - Smooth color transitions
• transition-all - Smooth transitions for all properties
• duration-300 - Control transition duration
• ease-in-out - Control transition timing

Follow these best practices for optimal dark mode implementation:

• Contrast ratios: Ensure text meets WCAG AA standards (4.5:1 contrast)
• Consistent theming: Apply dark mode consistently across all elements
• Smooth transitions: Use transition utilities for theme switching
• Test thoroughly: Test dark mode on all pages and components
• System preference: Respect user's system preference when possible
• Accessibility: Provide clear indicators for theme state
• Performance: Optimize images and assets for both themes

Design effective color palettes for dark mode:

• Light theme: Use light backgrounds with dark text
• Dark theme: Use dark backgrounds with light text
• Brand colors: Adjust brand colors for better contrast
• Neutral colors: Use appropriate gray scales
• Accent colors: Ensure accents remain visible in both themes

Advanced dark mode techniques for complex applications:

• Theme persistence: Save user preference in localStorage
• System detection: Detect system preference changes
• Component themes: Individual component dark modes
• Conditional images: Serve different images for each theme
• Custom properties: Use CSS variables for dynamic theming