🏠

Tailwind CSS Concept Explained

Making Things Interactive & Respond to Users

Change how something looks when the mouse pointer is over it.

Skill ID: Interactive_36

Description: Make a button change color, a link get an underline, etc., on hover.

Where to apply: Buttons, links, navigation items, interactive cards.

Key Tailwind Classes:

hover:bg-blue-700 , hover:underline

Gotcha: Not adding a transition class will make hover effects instant and potentially jarring. A smooth transition-colors duration-150 makes it feel much more polished. Overdoing hover effects can also be distracting.

Example:

Hover over the button and the link below to see the effects:

Hoverable Link 
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-md 
            hover:bg-blue-700 
            transition-colors duration-150">
  Hover Me
</button>

<a href="#" class="text-indigo-600 
               hover:underline hover:text-indigo-800 
               transition-colors duration-150">
  Hoverable Link
</a>

In this example:

  • The button changes its background color from bg-blue-500 to bg-blue-700 on hover, specified by hover:bg-blue-700 .
  • The link gets an underline and changes color from text-indigo-600 to text-indigo-800 on hover, specified by hover:underline and hover:text-indigo-800 .
  • Both elements use transition-colors duration-150 for a smooth visual transition, as highlighted in the "Gotcha" section.

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8:

🏠