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" > w3wiki </ 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 > |
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