小编Ins*_*mir的帖子

我刚刚开始学习 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: [],
}