tailwind-css
  1. tailwind-css-hover
PreviousNext

Tailwind CSS Hover

Tailwind CSS provides utility classes for handling hover states on elements. These classes follow a convention of using the hover: prefix to apply styles when the element is hovered over.

Syntax

The Tailwind CSS Hover plugin adds hover-specific utilities to elements. The syntax for using the hover plugin is as follows:

<!-- on hover -->
<div class="hover:bg-gray-200"></div>

<!-- on focus and hover -->
<button class="focus:hover:bg-blue-500"></button>

<!-- on hover when parent is focused -->
<span class="focus-within:hover:bg-green-500"></span>

Examples

Here are some examples of using Tailwind CSS Hover:

Example 1

<!-- Button with hover background color -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover me!
</button>

Example 2

<!-- Card with hover shadow -->
<div class="max-w-sm rounded overflow-hidden shadow-lg hover:shadow-2xl">
  <img class="w-full" src="https://static.additionalsheet.com/images//others/grass.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
</div>
Try Playground

Output

The output of the examples above will be a button with a hover background color in Example 1, and a card element with a hover shadow in Example 2.

Explanation

The Tailwind CSS Hover plugin adds additional utilities for hover-specific styles. These utilities can be used in conjunction with regular Tailwind classes to add functionality to elements.

Use

The Tailwind CSS Hover plugin can be used to add hover-specific styles to elements.

Important Points

  • The hover plugin can be used with focus and focus-within classes to add styles for elements that have the user's focus.
  • Hover classes in Tailwind CSS use the "hover" keyword before the additional class, such as "hover:bg-gray-200" to change the background color of an element on hover.
  • The hover plugin can be customized in the Tailwind configuration file to add additional hover-specific styles.

Summary

The Tailwind CSS Hover plugin provides additional utilities for adding hover-specific styles to elements. By using the "hover" keyword before the additional class, hover styles can be added to elements in conjunction with regular Tailwind classes. The hover plugin can be used with focus and focus-within classes to add styles for elements that have user focus, and can be customized in the Tailwind configuration file.

Utility-First FundamentalsFocus
Published on: