How to useCustom Classes in CSS

Approach 1: Using Utility 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"> 
        w3wiki 
    </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>

Output:

Using custom classes by modifying config.js

How to Modify Hover Effect using Tailwind CSS ?

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.