Have you ever visited a beautifully designed site late at night, only to be blinded by a glaring white screen?

If your app or website doesn’t have dark mode, you’re likely frustrating a big chunk of your users — and possibly losing them.

Today, let’s fix that.

Here’s how you can add a dark mode toggle to your Tailwind CSS project in under 10 minutes — without needing any complex setup or external libraries.
And yes, it’s as cool and useful as it sounds.

Image description

🎯 Why Dark Mode?

Before jumping into code, here’s why you should care:

  • 🌙 User Preference: Many users now expect dark mode as a default feature.
  • 👁️ Reduces Eye Strain: Especially important for night-time users.
  • 🔋 Battery Saver: Especially on OLED screens.
  • 😍 Modern Aesthetic: It just looks cool and professional.

Now let’s get building 👇

🧱 Step 1: Enable Dark Mode in Tailwind Config

Tailwind supports dark mode out of the box, but you need to turn it on.

Open your tailwind.config.js and add this:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

👉 The 'class' strategy lets you control when dark mode is active (great for toggle buttons).

🎨 Step 2: Update Your Styles

Tailwind lets you use dark: as a prefix. Here's an example:

class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded-xl shadow">
  This box changes based on theme

That’s it! Just use dark: in your class names for any element you want to style differently in dark mode.

🔘 Step 3: Add a Dark Mode Toggle with JavaScript

Here’s a simple toggle button you can drop into your project:

id="darkToggle" class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-sm">
  Toggle Dark Mode



  const toggle = document.getElementById('darkToggle');
  toggle.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });

Want to remember the user's choice with localStorage?
Here’s a more advanced version with persistence:
👉 Persistent Dark Mode with Tailwind + LocalStorage (GitHub Gist)

✅ Best Practices for Dark Mode

  • Use neutral backgrounds (gray-800, gray-900) for a smooth look.
  • Avoid pure black (#000) or white (#fff) – they can be harsh.
  • Test readability: make sure your text has enough contrast.
  • Consider theming your components with variables using Tailwind’s @apply.

📦 Bonus: Tailwind UI + Dark Mode

If you're using Tailwind UI, dark mode support is baked in!
Just use the dark: variants in your components.

📚 More Dark Mode Resources

💬 What’s Your Take?

Do you prefer websites with dark mode by default?
Have you already implemented dark mode on your app?

💭 Let’s talk in the comments — or drop a link to your project if you’ve built one using Tailwind dark mode!

Follow DCT Technology for more dev insights, design tips, and powerful web development techniques you can actually use. 🚀
Let’s level up together.

#tailwindcss #webdevelopment #darkmode #frontend #css #javascript #devtips #uxdesign #developers #dcttechnology #programming #coding #webdesign #uiux