How to useUtility Classes in CSS

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

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.