使用TailwindCSS的transition类结合hover前缀可实现按钮悬停动画，通过duration-300设置动画时长，配合ease-in-out控制缓动效果，使颜色、大小、阴影等属性变化更自然流畅。
想让按钮在悬停时有流畅的动画效果，TailwindCSS 提供了一套简洁高效的 transition 类，无需写任何自定义 CSS 就能快速实现专业级交互。
使用 transition 和 hover 实现基础悬停动画
Tailwind 的 transition 类是开启动画的基础，配合 hover: 前缀可以轻松定义鼠标悬停状态。
比如让按钮在悬停时颜色渐变、轻微放大：
<button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-500 hover:scale-105">点击我
</button>
transition 启用默认过渡，duration-300 设定动画持续时间为 300ms，hover:scale-105 让按钮放大 1.05 倍，视觉上更有反馈感。
立即学习“前端免费学习笔记（深入）”；
控制缓动效果让动画更自然
生硬的线性动画会显得机械，Tailwind 提供了 ease-linear、ease-in、ease-out 和 ease-in-out 来调整动画节奏。
推荐使用 ease-in-out，它在开始和结束时更柔和：
<button class="bg-purple-600 text-white px-4 py-2 rounded transition ease-in-out duration-300 hover:bg-purple-400 hover:scale-105">平滑悬停
</button>
这样按钮放大和变色的过程会更顺滑，提升整体质感。
组合多种属性实现丰富效果
你可以同时对多个属性应用过渡，比如背景、边框、阴影和变换：
<button class="bg-white text-gray-700 border border-gray-300 px-4 py-2 rounded transition-all duration-300 ease-in-out hover:shadow-lg hover:border-blue-400 hover:text-blue-600">立体悬停
</button>
transition-all 表示所有可动画属性都启用过渡，搭配阴影和边框变化，能让按钮“浮”起来，增强点击暗示。
基本上就这些。Tailwind 的 transition 系统简单直接，合理组合就能做出高质量的悬停反馈，不复杂但容易忽略细节。
