How to enable dark mode in Tailwind CSS ?

Last Updated : 16 Mar, 2023

In this article, we will see how to enable dark mode in Tailwind CSS. there are many ways, some of them we will see.

Tailwind CSS has special features to enable dark mode on the webpage. To enable dark mode in Tailwind CSS, we can define a dark theme in our Tailwind config file section and then we have to use the dark class in our HTML to apply it to specific elements. We can also define a custom color for specific elements or we can make the body element color white using internal CSS.

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

Using Dark Class Configuration
Using JavaScript Toggle Functionality

Using dark class configuration we can define what color should appear instead of the main color of the page.

Syntax:

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

Example 1: Enable dark mode using dark class configuration.

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?

In the above code example first, we declare a dark class in the body. Using JavaScript we enable the Dark mode of tailwind CSS. For text color visibility we toggled the color of the text using class= “bg-white dark:bg-gray-900″ which is predefined in Tailwind CSS. Following are the outputs of the above code example. Another way for enabling Dark mode in tailwind CSS is JavaScript Toggling Functionality.

Example 2: We can also switch the dark theme and light theme using the javascript toggle functionality. In this type of approach, we declare the background color and text color inside CSS Style. After using JavaScript and HTML we create a button for toggling classes and its property.

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> 
  
<style> 
    .dark-mode { 
        background-color: rgb(12, 12, 23); 
        color: white; 
    } 
</style> 
  
<body class="dark-mode"> 
    <div class="justify-center grid items-center h-screen"> 
        <div class="bg-dark-mode-white"> 
            <p class="text-dark-mode-black">GeeksForGeeks</p> 
  
            <button class="border p-2" onclick="document.body.classList.toggle('dark-mode')"> 
                Switch theme 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

How to enable dark mode in Tailwind CSS ?

In the above code, we created the .dark-mode class separately inside the style .bg-dark-mode-white is a class of predefined tailwind CSS class and when we click on the switch button it toggles the class between dark mode and bg-dark-mode-white and changes the color of the background color as well as text color of the page. In this way, we can enable and use a dark theme in Tailwind CSS.