DEV Community

Cover image for Day 12: How to Add Dark Mode in Tailwind CSS (The Right Way)
Ruqaiya Beguwala
Ruqaiya Beguwala

Posted on • Originally published at Medium

Day 12: How to Add Dark Mode in Tailwind CSS (The Right Way)

#webdev #tailwindcss #ui

Welcome back to 15 Days of Tailwind Tips — a blog series aimed at helping you build beautiful, responsive interfaces faster with Tailwind CSS. If you've been following along, we've explored centering, color systems, responsive grids, buttons, and more.

Today, we're diving into a feature that’s now expected in almost every modern web app: Dark Mode.

Tailwind CSS provides a simple but powerful way to support dark mode in your UI. Once you learn how to configure and apply it correctly, maintaining light and dark themes becomes effortless.

Let’s walk through it step by step.

Step 1: Enable Dark Mode in Your tailwind.config.js

Tailwind supports two strategies:

  • 'media': Uses the user’s OS/browser preference (default)
  • 'class': Controlled manually using a dark class

We’ll use the class-based approach for better control.

// tailwind.config.js module.exports = { darkMode: 'class', // or 'media' // other config... };
Enter fullscreen mode Exit fullscreen mode

Now Tailwind will only apply dark styles if you add the dark class somewhere in your HTML (usually on <html> or <body>).

Step 2: Add the dark Class to Your HTML

Apply the dark class dynamically (using JavaScript or user preference). For testing, you can hard-code it:

<html class="dark">
Enter fullscreen mode Exit fullscreen mode

You can later toggle this class using a button or a theme switcher.

Step 3: Apply Dark Mode Variants

Tailwind allows you to prefix any utility class with dark: to define alternate styles for dark mode.

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded"> This box adapts to dark mode. </div>
Enter fullscreen mode Exit fullscreen mode
  • bg-white (default light background)
  • dark:bg-gray-900 (overrides background in dark mode)
  • Same for text color and other utilities

Step 4: Style Components Consistently

Use dark variants on all key UI components — buttons, cards, modals, navbars, etc. Here's an example for a button:

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 dark:bg-blue-400 dark:hover:bg-blue-500"> Toggle Theme </button>
Enter fullscreen mode Exit fullscreen mode

Dark mode hover states can be styled just like regular ones.

Step 5: Add Transitions for Smoother Switching

Theme changes can feel jarring without animation. Use Tailwind’s transition utilities to smooth things out:

<div class="transition-colors duration-300 bg-white dark:bg-gray-900"> Smooth background change </div>
Enter fullscreen mode Exit fullscreen mode

Step 6: Use dark: Variants in Custom Classes (@apply)

If you’re using @apply in your CSS file for reusability, Tailwind also supports dark variants here.

.card { @apply bg-white text-black dark:bg-gray-800 dark:text-white p-4 rounded; }
Enter fullscreen mode Exit fullscreen mode

This works seamlessly in frameworks like React, Vue, or Next.js where you prefer component styling.

Advanced Tips and Tricks

Here are a few more ideas to level up your dark mode implementation:

1. Persist Dark Mode with LocalStorage

Use JavaScript to remember the user’s theme choice and apply the dark class on page load.

if (localStorage.theme === 'dark') { document.documentElement.classList.add('dark'); }
Enter fullscreen mode Exit fullscreen mode

2. Animate Background and Text Together

Use transition-colors with transition-all for a smoother UI feel across the board.

<div class="transition-all duration-300 bg-white dark:bg-gray-900 text-black dark:text-white"> Smooth text and background transition </div>
Enter fullscreen mode Exit fullscreen mode

3. Invert Images in Dark Mode

Use filter invert to adjust logos or icons dynamically.

<img src="/logo.png" class="dark:invert" />
Enter fullscreen mode Exit fullscreen mode

4. Add Dark Mode Placeholder Colors

Tailwind supports placeholder variants for dark mode as well:

<input class="bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500" />
Enter fullscreen mode Exit fullscreen mode

5. Use dark: with Pseudo Classes

You can mix dark mode with things like hover and focus for fully responsive behavior.

<a class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-300"> Read more </a>
Enter fullscreen mode Exit fullscreen mode

6. Create a Toggle Component with Alpine.js or JavaScript

Make a simple dark mode toggle:

const toggleTheme = () => { document.documentElement.classList.toggle('dark'); localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; };
Enter fullscreen mode Exit fullscreen mode

Add this to a button to allow users to switch instantly.

Conclusion

Dark mode is no longer just a visual preference — it’s a user expectation. With Tailwind CSS, implementing it is not only simple but scalable. You have full control over when, where, and how dark mode is applied.

Whether you're building a blog, dashboard, or SaaS product, mastering Tailwind's dark mode utilities will help you ship polished, modern UIs that adapt to your users’ preferences.

Top comments (0)