0
0
Tailwindmarkup~5 mins

Hover variant in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The hover variant lets you change how an element looks when you move your mouse over it. This helps users know what they can click or interact with.

You want a button to change color when someone points at it with the mouse.
You want links to underline only when hovered to keep the page clean.
You want images to zoom in slightly when hovered to show detail.
You want to highlight menu items as the mouse moves over them.
You want to show hidden text or icons only on hover for a neat design.
Syntax
Tailwind
hover:<utility-class>
Use hover: before any Tailwind utility to apply styles on mouse hover.
You can combine multiple hover utilities like hover:bg-blue-500 hover:text-white.
Examples
The button background turns blue when hovered.
Tailwind
<button class="hover:bg-blue-500">Click me</button>
The link gets underlined only when hovered.
Tailwind
<a href="#" class="hover:underline">Link</a>
The text color changes to red on hover.
Tailwind
<div class="hover:text-red-600">Hover over me</div>
Sample Program

This page shows a green button that becomes darker green when you hover your mouse over it. It also has focus styles for keyboard users.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hover Variant Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="px-6 py-3 bg-green-400 text-white font-semibold rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-600" aria-label="Submit button">
    Submit
  </button>
</body>
</html>
OutputSuccess
Important Notes

Hover effects only work with devices that have a mouse or pointer. On touch devices, hover styles usually do not apply.

Always include focus styles for accessibility so keyboard users can see which element is focused.

You can combine hover with other variants like focus or active for richer interactions.

Summary

The hover variant changes styles when the mouse is over an element.

Use hover: before Tailwind classes to apply hover styles.

Hover helps users understand what can be clicked or interacted with.