How to Enable Dark Mode in Tailwind CSS ?

Last Updated : 09 Oct, 2024

Tailwind CSS offers built-in features for enabling dark mode, allowing developers to create a dark-themed version of their web pages. By configuring the dark mode setting in the Tailwind configuration file and using the dark class, specific elements can seamlessly switch to dark-themed styles.

There are mainly two approaches for enabling dark mode in Tailwind CSS :

Table of Content

Using Dark Class Configuration
Using JavaScript Toggle Functionality

Approach 1: Using Dark Class Configuration

The Dark Class Configuration approach in Tailwind CSS enables dark mode by adding the darkMode: 'class' setting in the configuration file. This allows applying dark-specific styles using the `dark:` prefix, toggling themes by adding the dark class to elements.

Syntax

<script>
    tailwind.config = {
        darkMode: 'class',
    }
</script>

Example 1: In this example we are using Tailwind CSS to implement dark mode. The page content features a title and paragraph, with the background and text colors dynamically adjusting between light and dark themes.

HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com">
    </script>
    <script src=
"https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp">
    </script>
</head>
<script>
    tailwind.config = {
        darkMode: 'class',
    }
</script>
<style>
    body {
        color: #fff;
        height: 800px;
    }

    .bg-white {
        height: 100%;
    }
</style>

<body class="dark">
    <div class="bg-white dark:bg-gray-900">
        <h1 class="text-gray-900 dark:text-white">
            GeeksforGeeks</h1>
        <p class="text-gray-600 dark:text-gray-300">
            GeeksforGeeks is Computer Science Education Portal.
        </p>
        <p>GeeksforGeeks</p>
    </div>
</body>

</html>

Output:

How to enable dark mode in Tailwind CSS ? — How to enable dark mode in Tailwind CSS?

Approach 2: Using JavaScript Toggle Functionality

The JavaScript Toggle Functionality approach enables dark mode by toggling a custom class (e.g., .dark-mode) on elements. JavaScript functions dynamically add or remove this class, allowing users to switch between light and dark themes with a button click.

Syntax

onclick="document.body.classList.toggle('dark-mode')"

Example : In this example we example toggles dark mode using a custom .dark-mode class defined in the <style> section. Clicking the "Switch theme" button toggles the dark background and text color on the <body> element.