css Question posted in
Some basic documentation can be found here.

How to apply custom animations in Tailwind CSS?

I’m trying to apply custom animations to my elements using Tailwind CSS. I have successfully used Tailwind’s built-in utility classes for simple animations, but now I want to create a more complex animation sequence that isn’t covered by the default Tailwind classes.

Here is what I’ve done so far:

  1. Added a custom animation to my tailwind.config.js file:

    // tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'bounce-slow': 'bounce 3s infinite',
      },
    },
  },
}

  2. Applied the custom animation class to my HTML element:

    <div class="animate-bounce-slow">
  Custom bouncing element
</div>

However, this doesn’t seem to work. The element doesn’t bounce at all.

Questions:

  1. What am I missing in my configuration to make the custom animation work?
  2. How can I add more complex animations like keyframes to Tailwind CSS?

Additional Context:

  • I’m using Tailwind CSS version 2.0.3.
  • My project setup includes a basic Webpack configuration.
  • I’ve included Tailwind CSS in my project by following the official installation guide.

Any help or guidance on this would be greatly appreciated!

I tried adding a custom animation configuration to the `tailwind.config.js` file and then applied the custom animation class to an HTML element. I expected the element to bounce slowly with the custom animation I defined, but it didn’t animate at all. I’m unsure if I missed a configuration step or if there’s a different method to apply more complex animations using Tailwind CSS.

Tags:

2

Answers


  1. 0

    This works fine, see the tailwind playground.

    extend: {
  animation: {
    'bounce-slow': 'bounce 3s infinite',
  },
},
    Login or Signup to reply.
  2. 0

    I think something is wrong in your project config, maybe tailwind cannot find its config file or smth, as what you wrote looks correct to me. According to the doc (I suppose you based your code on this):

    You can customize these values by editing theme.animation or theme.extend.animation in your tailwind.config.js file.

    They also describe how to use a keyframe:

    module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search