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 Playground here 中检查此代码。

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

<块引用>

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

快乐，编码！

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

1 个答案: