How to use hover, focus and active variants in Tailwind CSS ?
Last Updated :
31 Mar, 2023
In this article, we will see how to use hover, focus, and active variants in Tailwind CSS. Tailwind CSS uses the Hover, Focus, and Active variants to style an element when the user mouses move over it, focuses it, or actively clicks/tapped it. These variants allow you to create interactive and dynamic user interfaces without writing custom CSS. These variants are very useful for creating interactive and dynamic user interfaces. You can create hover effects, focus styles, and active styles without writing custom CSS.
Why use hover, focus, and active variants in a tailwind?
The hover, focus, and active variants of Tailwind CSS help you add interactivity to your designs without writing a lot of additional CSS. By using these flavors in conjunction with utility classes, you can easily change the style of elements based on user interaction. By hovering over an element, focusing an input, or actively clicking a button. This can make your theme more dynamic and appealing to your users.
In addition, these variants let you group styles for different states of an element, making your CSS cleaner and easier to maintain. This will make future CSS easier to understand and edit. Additionally, these variants can improve the user experience by providing visual feedback to the user.
For example, when the mouse is moved or pressed over a button, you can change its background color to indicate that it is interactive and clickable. Alternatively, when an input has focus, you can change the border color to indicate that the input is ready.
Hover variant: The hover variant is used to style an element when the user hovers the mouse pointer over it. For example, you can use the hover:bg-red-500 class to change the background color of an element to red when the user hovers the mouse over it.
Syntax:
hover: {property}
Example 1: In this example, we will see how to use the hover variant.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Welcome to GFG</title>
<link rel="stylesheet" href="style.css">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<div class="flex justify-center
items-center min-h-screen">
<div>
<button class="bg-green-600 p-4
rounded-md hover:bg-green-700">
Hello Geek!
</button>
</div>
</div>
</body>
</html>
|
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
|
Output: When you hover over the button the color of the button changes as shown in the image:
Focus Variant: Focus variants are typically used to style an element when it has focus when the user clicks or tabs to it using the tab he key. For example, you can use the focus:outline-none class to remove the outline of the focused element.
Syntax:
focus:{property}
Example 2: In this example, we will see how to use the focus variant.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Welcome to GFG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex justify-center
items-center min-h-screen">
<div>
<button class="bg-green-600 p-4
rounded-md focus:bg-green-700">
Hello Geek!
</button>
</div>
</div>
</body>
</html>
|
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
|
Output:
Active Variant: Active variants are used to style elements when the user actively clicks or taps them.
Syntax:
active:{property}
Example 3: In this example, it is showing you how to use the active variant.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Welcome to GFG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex justify-center
items-center min-h-screen">
<div>
<button class="bg-green-600 p-4
rounded-md active:bg-green-700">
Hello Geek!
</button>
</div>
</div>
</body>
</html>
|
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
|
Output: When you click over the button the color of the button changes as shown in the image:
In summary, using the hover, focus, and active variants in Tailwind CSS can be an effective way to add interactivity and visual feedback to your designs. Elements can be styled based on user interaction. By hovering over an element, focusing an input, or actively clicking a button. This allows you to create a more dynamic and engaging user experience.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...