How to add a style on a condition in Tailwind CSS ?

Last Updated : 21 Sep, 2023

In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the styling properties conditionally:

By Implementing the Dynamic Class Binding
By using the dynamic based on the different button clicks

We will explore both approaches to include the styling properties conditionally, along with understanding them through the illustrations.

The following Tailwind CSS classes will be used:

bg-gray-100
flex
items-center
justify-center
rounded-lg
text-lg
mt-6

Adding Conditional Styling using the Dynamic Class Binding

In this approach, we are performing conditional Styling using Dynamic Class Binding in Tailwind CSS. Here, we are toggling the styles and different animations on the button click where the changes in the colors and text appearance are been done.

Example: This example illustrates the Adding Conditional Styling in Tailwind CSS.

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 Conditional 
        Styling Example 
      </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="bg-gray-100 min-h-screen  
             flex items-center justify-center"> 
  
    <div class="text-center"> 
        <h1 class="text-4xl font-bold mb-4 text-gray-700  
                   transition duration-500 transform  
                   motion-reduce:transform-none"> 
            GeeksforGeeks 
        </h1> 
        <p class="text-lg text-gray-600 mb-4 transition  
                   duration-500 transform  
                   motion-reduce:transform-none"> 
            Example for Tailwind CSS 
            Conditional Styling 
        </p> 
        <button class="px-4 py-2 rounded text-white font-semibold  
                   transition duration-300 ease-in-out  
                   focus:outline-none bg-blue-500 hover:bg-blue-600  
                   active:bg-blue-700 focus:bg-blue-600"  
                id="toggleButton"> 
            Click Me 
        </button> 
    </div> 
  
    <script> 
        const toggleButton =  
              document.getElementById('toggleButton'); 
        const geeksText = 
              document.querySelector('h1'); 
        const exampleText = 
              document.querySelector('p'); 
        let isToggled = false; 
  
        toggleButton.addEventListener('click', () => { 
            isToggled = !isToggled; 
            updateStyles(); 
        }); 
  
        function updateStyles() { 
            if (isToggled) { 
                toggleButton.classList.remove('bg-blue-500', 
                    'hover:bg-blue-600', 
                    'active:bg-blue-700', 
                    'focus:bg-blue-600'); 
                toggleButton.classList.add('bg-green-400', 
                    'hover:bg-green-500', 
                    'active:bg-green-600', 
                    'focus:bg-green-500'); 
  
                document.body.classList.add('bg-gray-200'); 
  
                geeksText.classList.add( 
                  'text-green-600', 'animate-bounce'); 
                exampleText.classList.add( 
                  'text-purple-600', 'animate-pulse'); 
            } else { 
                toggleButton.classList.remove('bg-green-400', 
                    'hover:bg-green-500', 
                    'active:bg-green-600', 
                    'focus:bg-green-500'); 
                toggleButton.classList.add('bg-blue-500', 
                    'hover:bg-blue-600', 
                    'active:bg-blue-700', 
                    'focus:bg-blue-600'); 
  
                document.body.classList.remove('bg-gray-200'); 
  
                geeksText.classList.remove( 
                  'text-green-600', 'animate-bounce'); 
                exampleText.classList.remove( 
                  'text-purple-600', 'animate-pulse'); 
            } 
        } 
    </script> 
</body> 
  
</html>

Output:

Adding Conditional Styling using dynamic change

In this approach, we will change the background dynamically by toggling the button, i.e., we use conditional styling in Tailwind CSS framework where we can change the background color of the page dynamically based on the different button clicks.

Example: This is another example that illustrates the Conditional Styling of the web page by using the button click.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>  
          Conditional Styling in 
        tailwindcss 
      </title> 
    <link
        href= 
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
        rel="stylesheet"> 
    <style> 
        .transition-colors { 
            transition: background-color 0.5s, color 0.5s; 
        } 
  
        @keyframes fadeIn { 
            from { 
                opacity: 0; 
            } 
  
            to { 
                opacity: 1; 
            } 
        } 
  
        .fadeIn { 
            animation: fadeIn 0.5s; 
        } 
    </style> 
</head> 
  
<body
    class="bg-gray-100 min-h-screen  
           flex items-center justify-center"> 
  
    <div class="text-center"> 
        <h1
            class="text-4xl font-bold mb-4 
                   text-green-500 transition-colors"> 
            <span
                class="bg-white px-2 py-1 rounded-lg"> 
                  GeeksforGeeks 
              </span> 
        </h1> 
        <p
            class="text-lg text-gray-600 mb-6 transition-colors"> 
            Click on the below colours: 
        </p> 
        <div
            class="flex justify-center space-x-4"> 
            <button
                class="w-12 h-12 rounded-full bg-blue-300  
                       hover:bg-blue-400 active:bg-blue-500  
                       focus:outline-none cursor-pointer" 
                onclick="changeBackgroundColor('bg-blue-300')"> 
              </button> 
            <button
                class="w-12 h-12 rounded-full bg-green-300  
                       hover:bg-green-400 active:bg-green-500  
                       focus:outline-none cursor-pointer" 
                onclick="changeBackgroundColor('bg-green-300')"> 
              </button> 
            <button
                class="w-12 h-12 rounded-full bg-purple-300  
                       hover:bg-purple-400 active:bg-purple-500  
                       focus:outline-none cursor-pointer" 
                onclick="changeBackgroundColor('bg-purple-300')"> 
              </button> 
        </div> 
        <p
            class="text-lg mt-6 transition-colors"> 
            Click on the colours to 
            change the background. 
        </p> 
        <div
            class="mt-10 p-6 rounded-lg shadow-md  
                   bg-white transition-colors"> 
            <p class="text-xl font-semibold"> 
                Styling Conditions in 
                tailwindcss 
              </p> 
            <p class="text-gray-600 mt-2"> 
                This Example shows how 
                additional content can 
                be styled based on 
                conditions. 
            </p> 
        </div> 
    </div> 
  
    <script> 
        function changeBackgroundColor(className) { 
            document.body.className =  
              `bg-gray-100 ${className} transition-colors`; 
        } 
    </script> 
</body> 
  
</html>