Tailwind CSS 交互状态 #

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  悬停变色
</button>

<!-- 悬停变色 -->
<div class="bg-white hover:bg-gray-100">悬停背景变化</div>

<!-- 悬停文字颜色 -->
<a class="text-gray-600 hover:text-blue-500">悬停文字变色</a>

<!-- 悬停缩放 -->
<div class="hover:scale-105 transition-transform">悬停放大</div>

<!-- 悬停阴影 -->
<div class="shadow-md hover:shadow-xl transition-shadow">悬停阴影</div>

<!-- 悬停透明度 -->
<div class="opacity-50 hover:opacity-100">悬停显示</div>

<!-- 悬停下划线 -->
<a class="hover:underline">悬停下划线</a>

<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-500 px-4 py-2 rounded">

<!-- 焦点环 -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  焦点环效果
</button>

<!-- 焦点环偏移 -->
<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-4">
  焦点环偏移
</button>

<!-- 子元素获得焦点时应用样式 -->
<div class="focus-within:ring-2 focus-within:ring-blue-500 p-4 rounded">
  <input class="w-full border rounded px-4 py-2" placeholder="输入内容">
</div>

<!-- 点击时缩小 -->
<button class="active:scale-95 transition-transform">
  点击缩小
</button>

<!-- 点击时变色 -->
<button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
  点击变色
</button>

<!-- 禁用样式 -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed bg-blue-500 text-white px-4 py-2 rounded" disabled>
  禁用按钮
</button>

<!-- 禁用悬停 -->
<button class="disabled:hover:bg-blue-500 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded" disabled>
  禁用悬停
</button>

<!-- 复选框选中样式 -->
<input type="checkbox" class="checked:bg-blue-500 checked:border-blue-500">

<!-- 自定义复选框 -->
<label class="flex items-center">
  <input type="checkbox" class="hidden peer">
  <div class="w-5 h-5 border-2 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500"></div>
  <span class="ml-2">选项</span>
</label>

<!-- 基于兄弟元素状态 -->
<input type="checkbox" class="peer" id="checkbox">
<label for="checkbox" class="peer-checked:text-blue-500">
  选中时文字变蓝
</label>

<!-- 表单验证 -->
<input class="peer border px-4 py-2 invalid:border-red-500" placeholder="输入邮箱">
<p class="hidden peer-invalid:block text-red-500 text-sm mt-1">
  请输入有效的邮箱地址
</p>

<!-- 组悬停 -->
<div class="group p-4 hover:bg-gray-100 rounded">
  <h3 class="font-semibold group-hover:text-blue-500">标题</h3>
  <p class="text-gray-600 group-hover:text-gray-900">内容</p>
</div>

<!-- 组焦点 -->
<div class="group">
  <input class="peer border px-4 py-2 rounded">
  <p class="hidden peer-focus:block mt-1 text-sm text-gray-500">
    焦点提示
  </p>
</div>

<!-- URL 哈希匹配时应用样式 -->
<div id="section" class="target:bg-yellow-100 p-4">
  目标区域
</div>

<ul>
  <li class="first:font-bold">第一项加粗</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li class="last:border-b-0 border-b">最后一项无下边框</li>
</ul>

<table class="w-full">
  <tr class="odd:bg-gray-100">
    <td>奇数行</td>
  </tr>
  <tr class="even:bg-gray-50">
    <td>偶数行</td>
  </tr>
</table>

<input class="placeholder:text-gray-400 border rounded px-4 py-2" placeholder="请输入内容">

<input class="read-only:bg-gray-100" value="只读内容" readonly>

<div class="empty:hidden">
  空时隐藏
</div>

<!-- 多个状态组合 -->
<button class="
  bg-blue-500 text-white px-4 py-2 rounded
  hover:bg-blue-600
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:bg-blue-700
  disabled:opacity-50 disabled:cursor-not-allowed
">
  完整状态按钮
</button>

<!-- 响应式 + 状态 -->
<button class="bg-blue-500 md:hover:bg-blue-600">
  仅桌面端悬停效果
</button>

<button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-400 dark:hover:bg-blue-500">
  暗色模式悬停
</button>

<button class="
  px-6 py-2 rounded-lg font-medium
  bg-blue-500 text-white
  hover:bg-blue-600
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:bg-blue-700 active:scale-95
  disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-500
  transition-all duration-200
">
  完整按钮
</button>

<div class="group bg-white rounded-lg shadow-md hover:shadow-xl p-6 transition-all duration-300">
  <img class="w-full h-48 object-cover rounded-lg group-hover:scale-105 transition-transform duration-300" src="image.jpg">
  <h3 class="font-semibold mt-4 group-hover:text-blue-500 transition-colors">卡片标题</h3>
  <p class="text-gray-600 mt-2">卡片内容描述</p>
</div>

<div class="relative">
  <input class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all" placeholder="请输入内容">
  <div class="absolute right-3 top-1/2 -translate-y-1/2">
    <svg class="w-5 h-5 text-gray-400 focus-within:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
  </div>
</div>

<div class="relative group">
  <button class="px-4 py-2 hover:bg-gray-100 rounded">
    菜单
  </button>
  <div class="absolute top-full left-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
    <div class="bg-white shadow-lg rounded-lg py-2 mt-2 min-w-[200px]">
      <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项 1</a>
      <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项 2</a>
      <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项 3</a>
    </div>
  </div>
</div>

<label class="flex items-center cursor-pointer">
  <input type="checkbox" class="hidden peer">
  <div class="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500 peer-focus:ring-2 peer-focus:ring-blue-500/50 transition-all">
    <svg class="w-full h-full text-white opacity-0 peer-checked:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
    </svg>
  </div>
  <span class="ml-2">选项文字</span>
</label>