使用 Tailwind CSS 实现悬停时 div 宽度平滑过渡效果（2秒）
在网页开发中，悬停交互效果能够提升用户的使用体验，让页面更具动态感。Tailwind CSS 作为一款实用性优先的 CSS 框架，提供了丰富的工具类来快速实现各类过渡动画效果。本文将详细介绍如何通过 Tailwind CSS 实现 div 元素在悬停时宽度平滑过渡，且过渡时长为 2 秒的效果。
实现原理
要实现平滑的宽度过渡效果，需要结合两类 Tailwind CSS 工具类：
宽度工具类：用于定义 div 元素默认状态和悬停状态的宽度值，例如
w-32表示默认宽度为 8rem，hover:w-64表示悬停时宽度为 16rem。过渡工具类：用于配置过渡动画的相关属性，包括过渡属性、过渡时长、过渡曲线等。其中
transition-all表示对所有可过渡的属性应用过渡效果，duration-2000表示过渡时长为 2000 毫秒（即 2 秒）。
基础实现代码
以下是实现该效果的基础 HTML 代码，直接引入 Tailwind CSS 即可运行：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS 悬停宽度过渡效果</title> <script src="https://www.ipipp.com"></script> </head> <body> <div class="w-32 h-32 bg-blue-500 transition-all duration-2000 hover:w-64"> <p class="text-white text-center pt-12">悬停查看宽度变化</p> </div> </body> </html>
代码说明
上述代码中的核心工具类作用如下：
w-32：设置 div 元素默认宽度为 8rem（128px）。h-32：设置 div 元素高度为 8rem（128px），保证元素比例协调。bg-blue-500：设置 div 元素背景色为蓝色，方便观察效果。transition-all：为 div 元素添加过渡效果，作用于所有可过渡的 CSS 属性。duration-2000：设置过渡动画的持续时间为 2000 毫秒，即 2 秒。hover:w-64：设置鼠标悬停时 div 元素的宽度变为 16rem（256px）。
扩展优化
如果需要调整过渡的流畅度，可以添加过渡曲线相关的工具类，例如：
ease-linear：匀速过渡。ease-in：慢速开始，然后变快。ease-out：快速开始，然后变慢。ease-in-out：慢速开始和结束。
以下是添加 ease-in-out 曲线后的优化代码：
<div class="w-32 h-32 bg-blue-500 transition-all duration-2000 ease-in-out hover:w-64"> <p class="text-white text-center pt-12">悬停查看宽度变化</p> </div>
注意事项
在使用 Tailwind CSS 实现宽度过渡时，需要注意以下几点：
确保目标元素本身支持宽度属性的过渡，默认情况下宽度是可过渡的属性，无需额外配置。
如果同时需要过渡其他属性，比如高度、背景色，
transition-all会自动覆盖所有可过渡属性，无需单独添加对应属性的过渡类。过渡时长单位是毫秒，
duration-2000对应 2000ms，即 2 秒，不要与秒为单位的数值混淆。