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"> w3wiki </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:
How to add a style on a condition in Tailwind CSS ?
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