Tailwind CSS 动画在 ReactJs/NextJs 中不起作用

Question

我刚刚开始学习 Tailwind 和 Nextjs，实际上我正在按照教程进行编码，并且完全按照视频中的方式进行操作。我想在鼠标悬停在图标上时使用弹跳动画。有趣的是，它第一次确实有效，但后来就停止工作了。

function HeaderItem({Icon, title}) {
    return (
        <div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white">
            <Icon className="h-8 mb-1 group-hover:animate-bounce"/>
            <p className="opacity-0 group-hover:opacity-100 tracking-widest">{title}</p>
        </div>
    )
}

这是到目前为止我的顺风配置

module.exports = {
  mode: "jit",
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Answer 1

Group-hover在动画中，因为默认情况下未启用它，因此您需要检查此文档variants extend中的配置tailwind.config.js

您还可以在此处检查此Tailwind Playground 代码。

//tailwind.config.js
module.exports = {
  theme: {},
  variants: {
    extend: {
      animation: ['group-hover'],
    },
  },
}

注意！现在目前group-hover:animation无法在最新的顺风版本上工作。检查这个文档

快乐，编码！