Not able to use multiple animations - TailwindCSS

user_19066133 0
Viewed 258

Currently am creating my first website.

I have added two custom animations within my tailwind.config.css, but only am able to use one of them.

  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      animation: {
        text: 'text 5s ease infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center'
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center'
          }
        },
      }
    }
  }
}

Here is my tailwind.config.css

I am able to use the animate-text, but not animate-wiggle.

Thanks,

tailwind-css reactjs css
1 Answers

The way you define the animations and keyframes isn't valid JSON, instead of

animation: {
  wiggle: 'wiggle 1s ease-in-out infinite',
},
animation: {
  text: 'text 5s ease infinite',
},

you should write it as

animation: {
  wiggle: 'wiggle 1s ease-in-out infinite',
  text: 'text 5s ease infinite',
},

The same holds for the keyframes section.

user_33157790
Related