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

Posted 2023-03-06

【中文标题】Tailwind CSS 动画在 ReactJs/NextJs 中不起作用

【英文标题】：Tailwind CSS animations not working in ReactJs/NextJs

【发布时间】：2021-09-11 13:24:45

【问题描述】：

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

【参考方案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

快乐，编码！

【讨论】：

OP 使用 JIT 模式，默认启用所有变体。 tailwindcss.com/docs/just-in-time-mode#all-variants-are-enabled 但是您提到的问题是正确的。我不明白问题创建者为什么关闭它。

是的，我检查过使用group-hover，但它在 JIT 模式下不起作用，所以我找到了回答这个问题的理由。:) 这个问题关闭了吗？

试过了，还是不行。您还有其他解决方案吗？

一两周前解决了问题 was merged，但 Tailwind 的创建者 Adam 是 on vacation right now。因此，该软件包还没有新版本。如果有人真的急于让他们的开发环境暂时工作，我创建了一个NPM package with the fix，注意你必须修改 node_modules 文件夹名称和 package.json 为tailwindcss，而不是tailwindcss-fix-...