CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Inshal Aamir
Inshal Aamir

Reputation: 133

Tailwind CSS animations not working in ReactJs/NextJs

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: [],
}

Upvotes: 6

Views: 17495

Answers (1)

JsWizard
JsWizard

Reputation: 1749

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!

Upvotes: 4

Related Questions