How to add a style on a condition in Tailwind CSS ?
Last Updated :
25 Jul, 2024
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/[email protected]/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/[email protected]/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>
Output:
Similar Reads
How to Add New Colors in Tailwind CSS ? Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. In such cases, you may
4 min read
How to Add Both !important & selector Strategy for Tailwind CSS Configuration ? Tailwind CSS is a popular utility-first CSS framework that provides a set of pre-defined classes for common styles such as margins, padding, colors, and more. While Tailwind aims to provide a simple and easy-to-use solution for styling websites and applications, sometimes we need to override the def
3 min read
How to add custom styles and ways to add custom styles in Tailwind-CSS ? Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling
3 min read
How to Set Text Color in RGBA in Tailwind CSS ? In this article, we will change the color of text to rgba(0, 0, 0, 0.54) which is an RGB color format with an added parameter alpha that tells the opacity of the color. In this article, we are going to learn how we can achieve the text color of rgba(0, 0, 0, 0.54) in Tailwind CSS and hence, change t
3 min read
How to Add Tailwind CSS to HTML ? Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.Integration Options:CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm: In
3 min read
How To Add Custom Box Shadow In Tailwind CSS? Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and
3 min read