How to Modify Hover Effect using Tailwind CSS ?

Last Updated : 27 Sep, 2023

In Tailwind CSS, the term “modify hover” refers to changing the styles that are applied to an element when it is hovered over. With Tailwind CSS “hover” variation, you can quickly apply particular utility classes and custom classes to control how components appear when you hover over them, giving you flexibility in creating hover effects for your web application. In this article, we will see the different techniques to manipulate the hover effect with the help of Tailwind CSS.

Syntax:

<element class="base-class hover:modified-class">
    Content
</element>

Where,

base-class: This is the base utility class, which establishes the element’s default style.
hover :modified-class: This combines the hover variant and the modified-class. The modified class is applied when the element is hovered over.

Here, we have some common approaches to modifying hover in Tailwind CSS:

Using utility classes
Using custom classes

Approach 1: Using Utility Classes

The most straightforward approach is to use utility classes provided by Tailwind CSS. You can apply different utility classes to modify specific properties like background color, text color, padding, etc.

Example: In this example, we are using Tailwind CSS to create a centered heading and a button. The button changes its background color from blue to red when hovered over.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet"> 
    <title> 
          Tailwind CSS Hover Example 
      </title> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <div class="flex justify-center items-center"> 
        <button class="bg-blue-500 hover:bg-red-500  
                       text-white font-bold py-2  
                       px-4 rounded"> 
            Hover me! 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Approach 2: Using Custom Classes

Tailwind CSS also allows you to define custom classes and apply them to elements. You can define custom classes in your tailwind.config.js file and use them to modify hover effects.

Example: In this example, we will modify the code to include a custom class called customRed, which can define the custom class in your tailwind.config.js file as follows:

Javascript

// tailwind.config.js 
  
module.exports = { 
    theme: { 
        extend: { 
            colors: { 
                customRed: '#DE3163', 
            }, 
        }, 
    }, 
    variants: {}, 
    plugins: [], 
};

HTML code: When a button is hovered over, the background color is changed to the custom red color specified in the configuration file by applying the hover:bg-customRed class to the button element. The border-blue-500 hover:border-customRed classes also change the button’s border color.

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 Hover Effect Example 
      </title> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-5xl font-bold text-green-600  
               flex items-center justify-center"> 
        GeeksforGeeks 
    </h1> 
    <div class="flex items-center justify-center"> 
        <button class="rounded border border-blue-500  
                       px-4 py-2 font-bold text-white opacity-75  
                       transition-all duration-300 ease-in-out  
                       hover:border-customRed hover:bg-customRed  
                       hover:opacity-100"> 
            Hello world! 
        </button> 
    </div> 
</body> 
  
</html>