使用TailwindCSS的transition类结合hover前缀可实现按钮悬停动画，通过duration-300设置动画时长，配合ease-in-out控制缓动效果，使颜色、大小、阴影等属性变化更自然流畅。

想让按钮在悬停时有流畅的动画效果，TailwindCSS 提供了一套简洁高效的 transition 类，无需写任何自定义 CSS 就能快速实现专业级交互。

使用 transition 和 hover 实现基础悬停动画

Tailwind 的 transition 类是开启动画的基础，配合 hover: 前缀可以轻松定义鼠标悬停状态。

比如让按钮在悬停时颜色渐变、轻微放大：

transition 启用默认过渡，duration-300 设定动画持续时间为 300ms，hover:scale-105 让按钮放大 1.05 倍，视觉上更有反馈感。

控制缓动效果让动画更自然

生硬的线性动画会显得机械，Tailwind 提供了 ease-linear、ease-in、ease-out 和 ease-in-out 来调整动画节奏。

推荐使用 ease-in-out，它在开始和结束时更柔和：

这样按钮放大和变色的过程会更顺滑，提升整体质感。

组合多种属性实现丰富效果

你可以同时对多个属性应用过渡，比如背景、边框、阴影和变换：

transition-all 表示所有可动画属性都启用过渡，搭配阴影和边框变化，能让按钮“浮”起来，增强点击暗示。

基本上就这些。Tailwind 的 transition 系统简单直接，合理组合就能做出高质量的悬停反馈，不复杂但容易忽略细节。