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 检查这个Doc

您也可以在Tailwind Playgroundhere查看此代码。

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

注意！现在目前group-hover:animation 不适用于最新的顺风版本。检查这个doc

快乐，编码！