How to Create Multiple Themes using Tailwind CSS ?

Last Updated : 26 Apr, 2023

In this article, we will discuss how to create multiple themes using Tailwind CSS. Tailwind CSS is a popular utility-first CSS framework that provides a lot of pre-designed CSS classes for designing websites. With Tailwind CSS, you can easily create multiple themes for your website. This means that you can have different styles for different sections or pages of your website, or you can offer your users the ability to switch between themes on your website.

Syntax:

// tailwind.config.js
module.exports = {
     theme: {
           extend: {
             // Add your custom styles here
           },
     },
     variants: {},
     plugins: [],
}

Approach 1: Using the extended property: Can create a new theme by adding your custom styles to the extended property of the theme object. You can then switch between themes by dynamically adding or removing a class to your HTML element that contains your website’s content.

Example: In this example, it contains necessary Tailwind CSS classes as well as a custom dark class to apply the dark theme. It also includes a JavaScript code to toggle the dark class on and off when the “Switch Theme” button is clicked.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title> 
        Tailwind CSS Multiple Themes 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css"
        integrity= 
"sha512-DlG/kE98EG/bqK4kJn5L5N5v5FOyPKp7SfK/z/0Sl8w89E/3q3q4Cxr0l1V8e2HkrdjV7OuJzyB+dyemWTwGw=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer" /> 
          
    <style> 
        .dark { 
            --tw-bg-opacity: 1 !important; 
            background-color: rgba(38, 50, 56, var(--tw-bg-opacity)); 
            --tw-text-opacity: 1 !important; 
            color: rgba(255, 255, 255, var(--tw-text-opacity)); 
        } 
    </style> 
</head> 
  
<body> 
  
    <div class="container mx-auto py-8"> 
        <div class="flex justify-between items-center"> 
            <h1 class="text-green-600  
                       text-5xl font-bold" style="color: green;"> 
                GeeksforGeeks 
            </h1> 
            <h1 class="text-3xl font-bold"> 
                Tailwind CSS Multiple Themes Example 1 
            </h1> 
            <button class="border border-gray-400  
                           rounded px-4 py-2 text-gray-600 
                           hover:bg-gray-200" id="toggle-theme"> 
                Switch Theme 
            </button> 
        </div> 
        <div class="my-8 p-6 bg-white shadow-md  
                    dark:bg-gray-800"> 
        </div> 
    </div> 
    <script> 
        const toggleThemeBtn = 
            document.getElementById("toggle-theme"); 
        const htmlEl = 
            document.getElementsByTagName("html")[0]; 
  
        toggleThemeBtn.addEventListener("click", function () { 
            htmlEl.classList.toggle("dark"); 
        }); 
    </script> 
</body> 
  
</html>

Output:

How to create multiple themes using Tailwind CSS?

Approach 2: Using the variants property: Can create multiple themes by defining new variants for Tailwind CSS’s pre-designed classes. You can then apply these variants to your HTML elements to switch between themes.

Example: In this example, we’ve created two custom CSS classes .theme-primary and .theme-secondary that define the primary and secondary themes respectively. These classes override the default Tailwind CSS styles for the background-color and color properties, which allow us to change the theme colors.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title> 
        Tailwind CSS Multiple Themes 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css"
        integrity= 
"sha512-DlG/kE98EG/bqK4kJn5L5N5v5FOyPKp7SfK/z/0Sl8w89E/3q3q4Cxr0l1V8e2HkrdjV7OuJzyB+dyemWTwGw=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer" /> 
  
    <style> 
        .theme-primary { 
            --tw-bg-opacity: 1 !important; 
            background-color: black; 
            --tw-text-opacity: 1 !important; 
            color: rgb(255, 255, 255); 
        } 
  
        .theme-secondary { 
            --tw-bg-opacity: 1 !important; 
            background-color: grey; 
            --tw-text-opacity: 1 !important; 
            color: black; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container mx-auto py-8"> 
        <div class="flex justify-between items-center"> 
            <h1 class="text-green-600  
                       text-5xl font-bold" style="color: green;"> 
                GeeksforGeeks 
            </h1> 
            <h1 class="text-3xl font-bold"> 
                Tailwind CSS Multiple Themes Example 2 
            </h1> 
            <div> 
                <button class="border border-gray-400 rounded 
                               px-4 py-2 text-gray-600  
                               hover:bg-gray-200" id="theme-primary"> 
                    Primary 
                </button> 
                <button class="border border-gray-400 rounded  
                               px-4 py-2 text-gray-600  
                               hover:bg-gray-200" id="theme-secondary"> 
                    Secondary 
                </button> 
            </div> 
        </div> 
  
        <div class="my-8 p-6 bg-primary 
                    text-primary shadow-md 
                    theme-primary dark:bg-gray-800 
                    dark:text-white"> 
        </div> 
    </div> 
  
    <script> 
        const themePrimaryBtn = 
            document.getElementById("theme-primary"); 
        const themeSecondaryBtn = 
            document.getElementById("theme-secondary"); 
        const htmlEl = 
            document.getElementsByTagName("html")[0]; 
  
        themePrimaryBtn.addEventListener("click", function () { 
            htmlEl.classList.remove("theme-secondary"); 
            htmlEl.classList.add("theme-primary"); 
        }); 
  
        themeSecondaryBtn.addEventListener("click", function () { 
            htmlEl.classList.remove("theme-primary"); 
            htmlEl.classList.add("theme-secondary"); 
        }); 
    </script> 
</body> 
  
</html>