Implementing Dark Theme in Tailwind CSS: A Step-by-Step Guide

Are you looking to enhance the user experience of your website by adding a dark theme? Tailwind CSS, with its utility-first approach, makes it incredibly easy to implement dark mode seamlessly. In this tutorial, we'll walk you through the process of adding a dark theme to your Tailwind CSS project, step by step.

Step 1: Set Up Your Tailwind CSS Project

If you haven't already, start by setting up your Tailwind CSS project. You can do this by installing Tailwind CSS via npm:

npm install tailwindcss

Then, create your Tailwind configuration file by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project directory.

Step 2: Enable Dark Mode in Your Configuration

Open your tailwind.config.js file and locate the theme section. Inside the extend object, add a dark key with the values you want to apply in dark mode. For example:

module.exports = {
  theme: {
    extend: {
      colors: {
        dark: '#333333',
      },
    },
  },
  darkMode: 'class',
  variants: {
    extend: {
      backgroundColor: ['dark'],
      textColor: ['dark'],
    },
  },
  plugins: [],
}

In this example, we've added a dark color for the background using the dark variant.

Step 3: Toggle Dark Mode Using JavaScript

To enable toggling between light and dark mode, you'll need some JavaScript. Create a JavaScript file (e.g., darkmode.js) and add the following code:

document.addEventListener('DOMContentLoaded', function() {
  const toggleDarkMode = document.querySelector('#toggleDarkMode');

  toggleDarkMode.addEventListener('click', function() {
    document.body.classList.toggle('dark');
  });
});

In this code, we're toggling the dark class on the body element when a button with the id toggleDarkMode is clicked.

Step 4: Add the Toggle Button to Your HTML

Finally, add the toggle button to your HTML file:

<button id="toggleDarkMode">Toggle Dark Mode</button>

Step 5: Style Your Dark Theme

Now that you've set up the functionality for dark mode, it's time to style your dark theme. You can use Tailwind CSS utility classes to apply styles specifically for dark mode. For example:

<div class="bg-dark text-white">
  This is a dark-themed element.
</div>

Toggle Dark Mode in React

If you're using React, you can achieve the same dark mode toggle functionality by using state. Here's an example:

import React, { useState } from 'react';
import './App.css'; // Import Tailwind CSS styles

function App() {
  const [darkMode, setDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
    document.body.classList.toggle('dark');
  };

  return (
    <div className={darkMode ? 'dark' : ''}>
      <h1>Implementing Dark Theme in Tailwind CSS: A Step-by-Step Guide</h1>
      <button onClick={toggleDarkMode}>Toggle Dark Mode</button>
      <p>This is a dark-themed element.</p>
    </div>
  );
}

export default App;

With this code, clicking the button will toggle the dark class on the body element and update the state to reflect the current mode.

Example: In your component add following class, when theme is enabled in light background color white applied, for dark black background applied

<div className="bg-white dark:bg-black"></div>

Conclusion

Congratulations! You've successfully implemented a dark theme in your Tailwind CSS project and learned how to toggle it using JavaScript, including support for React. With just a few simple steps, you can enhance the user experience of your website and provide users with the option to choose their preferred theme. Happy coding!