How can I add shadows that change on hover in Tailwind CSS?
Asked on Sep 14, 2025
Answer
In Tailwind CSS, you can easily add hover effects using the "hover:" prefix. To change shadows on hover, you apply a base shadow class and then a different shadow class with the "hover:" prefix.
<!-- BEGIN COPY / PASTE -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
Hover over me!
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "shadow-md" class applies a medium shadow to the element by default.
- The "hover:shadow-lg" class changes the shadow to a larger one when the element is hovered over.
- "transition-shadow" and "duration-300" ensure a smooth transition effect when the shadow changes.
- These utilities help create interactive and visually appealing UI components.
Recommended Links: