现代网页都是有着丰富的交互效果的，比如鼠标放上去按钮变色、输入框点击后边框发亮等等。其中，最常见的 2 种交互状态是：
- 悬停（hover）：比如当用户的鼠标光标移动到某个元素（如按钮）上方时。
- 聚焦（focus）：比如当用户点击选中某个输入框准备输入文字时。
在传统 CSS 中，我们需要使用 :hover、:focus 这两个伪类来实现这些效果。而有了 Tailwind CSS 之后，我们完全不需要编写任何 CSS 伪类 代码，而只需要使用 “状态修饰符” 就可以轻松实现了。
Tailwind CSS 悬停状态
在 Tailwind CSS 中，我们可以使用 “hover:” 这个状态修饰符来定义鼠标悬停效果。
语法：
hover:类名说明：
我们只需要在 “hover:” 后面加上对应的类名，就可以实现鼠标悬停效果了。
示例 1：定义鼠标悬停效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="flex items-center justify-center min-h-screen">
<button class="bg-green-500 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:bg-green-600 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
绿叶网
</button>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 “hover:” 状态修饰符来实现了鼠标悬停效果。
hover:bg-green-600：鼠标放上去时，背景色变深。hover:shadow-xl：鼠标放上去时，阴影扩散，产生脱离背景的错觉。hover:-translate-y-1：鼠标放上去时，利用 Y 轴负方向平移，实现按钮 “轻微上浮” 的物理动画效果。
需要注意的是，这 3 个 “hover:” 需要分开定义，否则是有问题的。
<!--正确-->
<button class="hover:bg-green-600 hover:shadow-xl hover:-translate-y-1"></button>
<!--错误-->
<button class="hover:bg-green-600 shadow-xl -translate-y-1"></button>Tailwind CSS 聚焦状态
当我们点击一个文本框准备开始输入内容时，这个文本框就处于 “聚焦” 状态。合理的聚焦样式，可以极大提升我们网站的用户体验
在 Tailwind CSS 中，我们可以使用 “focus:” 这个状态修饰符来定义元素聚焦效果。
语法：
focus:类名说明：
我们只需要在 “focus:” 后面加上对应的类名，就可以实现聚焦状态效果了。
实际上，所有 Tailwind CSS 状态修饰符的语法都是一样的，都是：
状态前缀:功能类名示例 2：定义文本框聚焦效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="flex items-center justify-center min-h-screen">
<div class="w-full max-w-md p-6 bg-white rounded-xl shadow-md">
<input type="text" placeholder="搜索绿叶网..." class="w-full px-4 py-3 border border-gray-300 rounded-lg outline-none focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-colors">
</div>
</body>
</html>默认情况下，页面效果如下图 1 所示。点击输入框时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用 “focus:” 状态修饰符来定义了文本框的聚焦效果。当文本框聚焦时，focus:border-green-500 会使得原来的灰色边框（border-gray-300）变成绿色边框（border-green-500）。
而 focus:ring-2 focus:ring-green-200 使得在边框外围再渲染一圈淡淡的绿色光环（光晕），从而让输入框看起来更加饱满立体。
Tailwind CSS 组悬停
在实际开发中，我们经常遇到这样一种头疼的场景：鼠标悬停在 “父元素”（比如整个卡片）上时，改变内部 “子元素”（比如标题、图标）的颜色。
在传统 CSS 中，我们需要写一大堆嵌套选择器（如 .card:hover .title { color: red; }） 等。为了解决这个问题，Tailwind CSS 提供了两个非常有用的特性：group 和 group-hover:。
我们只需要在父元素上添加 “group” 类名（作为一个标记），然后在任意后代元素上使用 “group-hover:” 前缀，这样后代元素就能感知到父元素的悬停状态了。咱们还是到具体例子中去看一下。
示例 3：组悬停效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen">
<div class="group w-80 bg-white border border-gray-200 rounded-2xl p-5 hover:border-green-500 hover:shadow-2xl transition-all duration-300 cursor-pointer">
<div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center group-hover:bg-green-100 transition-colors">
<span class="text-2xl font-black text-gray-400 group-hover:text-green-500 transition-colors">L</span>
</div>
<h3 class="mt-4 text-xl font-bold text-gray-800 group-hover:text-green-600 transition-colors">
绿叶网
</h3>
<p class="mt-2 text-gray-500 text-sm leading-relaxed">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</p>
<div class="mt-4 flex items-center text-gray-400 font-medium group-hover:text-green-500 transition-colors">
<span>开始学习</span>
<span class="ml-1 group-hover:translate-x-1 transition-transform">→</span>
</div>
</div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移动到卡片上时，页面效果如下图 2 所示。
分析：
在这个例子中，首先我们给父元素（即卡片本身）加上了 “group” 这个类名。然后当鼠标移到卡片上时，再给其后代元素使用 “group-hover:” 加上对应的效果，其中：
- 左上角图标：背景从灰色变成浅绿色（group-hover:bg-green-100）。
- 课程标题：从深灰色变成亮绿色（group-hover:text-green-600）。
- 底部箭头：向右侧发生了位移（group-hover:translate-x-1）。
其他状态前缀
除了 hover: 和 focus: 这两个状态前缀外，Tailwind 几乎支持所有的CSS 伪类，包括：
active:：当元素被鼠标按下时（比如按钮点击下去的瞬间）。disabled:：当表单元素处于禁用状态时（如 <button disabled>）。focus-within:：当元素内部的任何子元素获得焦点时（常用于复杂的自定义输入框组）。first:：列表的第一个元素。last:：列表的最后一个元素。
这里需要清楚的是，Tailwind CSS 中的状态前缀是可以组合使用的，比如：
md:hover:bg-green-500上面这句代码表示：只有在平板或电脑屏幕下（md:），并且鼠标悬停时（hover:），背景才变绿。
常见问题
1. 为什么我的 hover 效果感觉很生硬，一闪一闪的呢？
很可能是因为你忘记加过渡属性了。在使用 hover: 或 focus: 来改变颜色、尺寸或位置时，建议在元素上加上 transition 或 transition-all 类名，这样才会有过渡动画效果。
2. 为什么在手机端上，hover 效果会变得很奇怪？
这是因为手机端和触摸屏设备没有 “鼠标悬停” 这个概念。在手机上，当我们点击某个元素时，系统通常会把它当作 hover 处理。这往往会导致颜色卡住，然后需要点击其他地方才能取消。
这其实也是 Web 开发的通用痛点。在实际项目中，如果要做到极致的体验，我们会利用 “ Tailwind CSS 响应式设计”（后面会介绍）来确保只在支持鼠标的设备上启用 hover 效果（比如 md:hover:bg-green-500）。
