What is Dark Mode?
Dark mode provides a low-light experience that reduces eye strain during late-night browsing. Tailwind makes it easy to implement with its configuration-first approach.
"Good design is simple, consistent, and considerate."
Implementing Dark Mode
Tailwind allows you to create a seamless dark mode experience that adapts to user preferences and system settings.
1. Use dark: Utilities
Use the dark: prefix to define styles for dark mode.
2. Configure in tailwind.config.js
Add the darkMode option and define a custom class if using a class-based toggle.
module.exports = {
darkMode: 'class', // or 'media' for system preference
theme: {
extend: {
colors: {
'dark-bg': '#1a202c',
'dark-card': '#2d3748',
}
}
}
}
Best Practices
Implementing dark mode responsibly ensures your UI remains accessible and easy to maintain.
Semantic Colors
Create reusable colors in your tailwind.config.js to maintain consistency across themes.
Responsive Design
Ensure dark mode scales properly on mobile and desktop through Tailwind's responsive prefixes.
User Controls
Provide a toggle in your UI so users can switch between light and dark mode manually.
Accessibility
Ensure sufficient contrast and usability in both modes using tools like WCAG Checker.
Example UI
Here's how to build a card component with dark mode support using only Tailwind classes.
Dark & Light
Toggle Mode
Use the button below to switch between light and dark mode.