Preloaded animations cease to work when adding keyframes or animations in config

[Betanoir]

Hi all,

I added my own animation and keyframes to the tailwind config file for a separate animation but was using the preloaded animate-bounce utility and as I added said animations and keyframes, the animate-bounce stopped working.

When adding my own animation, using the bounce animation class doesn't even add the animation property in the compiled CSS. It's almost as if tailwind overrides the preloaded animations entirely when you add your own definitions in the config file.
When adding my own keyframes, the class defines the animation in the compiled CSS, but does not compile the keyframes nor define the animation.

Below is my tailwind config file:

// tailwind.config.ts

    animation: {
      shimmer: 'shimmer 2s infinite',
    },
    keyframes: {
      shimmer: {
        '100%': {
          transform: 'translateX(100%)',
        },
      },
    },

Below is the SVG element using the animate-bounce utility:

<ChevronDoubleDownIcon className="mx-auto h-8 w-8 animate-bounce" />

Below is the SVG element in the browser showing the animation is defined in the class list, but not in the compiled styles:

Of course, what I can and will most probably do for the time being is add the keyframes and animation definitions for the animate-bounce as referenced in the documentation but I'm not entirely sure if this is supposed to work like it does currently.

Many thanks

[adamwathan]

Hey! Can you post your full config file? My guess is you are overriding the defaults and not using extend:

https://tailwindcss.com/docs/theme#extending-the-default-theme

[Betanoir]

Oh yes!

My apologies, you are correct! My config file is extensive so it becomes rather difficult to see which object I place my utilities in.

Anyway, thank you and a huge thanks for the quick response! 🙏🏻