Tailwind CSS animations not working in ReactJs/NextJs

user_16341573 0
Viewed 4580

I just started learning Tailwind and Nextjs and I was actually coding along a tutorial and did everything exactly as it was in the video. I want to use the bounce animation on an icon when hovered over. The funny thing is that it actually did work the first time but then it just stopped working.

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>
    )
}

This is my tailwind config so far

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: [],
}
tailwind-css next.js reactjs
1 Answers

Group-hover in animation as it's not enabled by default, so you need variants extend your config in tailwind.config.js check this Doc

You can also check this code in the Tailwind Playground here.

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

Notice! now currently group-hover:animation is not working on latest tailwind version. check this doc

Happy, coding!

user_46340600
Related