Tailwind CSS图片悬停卡片动画失效：父状态样式问题排查

你的基于父元素group的悬停样式不生效，主要有以下几个关键原因：

• 未引入Tailwind CSS核心样式：你的HTML代码里完全没有加载Tailwind的CSS文件，所有Tailwind类（包括group、group-hover、rotate-20等）都不会被浏览器识别，自然不会产生任何效果。
• 使用了无效的Tailwind类：h-100不是Tailwind的合法类名，Tailwind的高度类采用h-{size}格式，其中size是预设值（比如h-20对应5rem）或者自定义值（比如h-[100px]），这个错误会导致卡片高度不符合预期，间接影响交互体验。
• 缺少过渡动画类：就算前面的问题都解决，你没有给需要旋转的元素添加过渡类（比如transition-transform），group-hover:-rotate-20会瞬间触发旋转，没有平滑的动画过渡，看起来和“没生效”一样。

<html>
<head>
  <!-- 引入Tailwind CSS CDN样式，生产环境建议本地构建 -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="group card my-14 mx-3 w-80 h-[400px] bg-gray-800 rounded-xl text-white p-5 cursor-pointer">
    <div class="flex justify-between items-center text-2xl">
      <i class='bx bx-heart'></i>
      <i class='bx bx-cart-alt'></i>
    </div>
    <!-- 添加transition-transform实现平滑旋转动画 -->
    <div class="w-11/12 ml-2.5 transition-transform group-hover:-rotate-20">
      <img class="object-cover w-full h-full" src="./Images/Jordan.png" id="bannerImage" alt="Jordan 1 sneakers">
    </div>
    <div class="text-center uppercase text-xl text-green-600">
      Jordan 1 <br>
      $299
    </div>
  </div>
</body>
</html>

• 如果你是本地项目而非CDN引入，确保已经正确配置Tailwind并构建了CSS文件；
• group-hover的生效前提是父元素必须有group类，你这部分是正确的；
• 过渡类可以根据需求选择，比如transition-all会对所有可过渡属性生效，transition-transform只针对变换属性，后者性能更好。

内容的提问来源于stack exchange，提问作者THTCN