CSS animation won't play when I add a class using jQuery

Question

I am trying to add a fadeout transition animation from 100 opacity to 0 opacity for a given div by adding the animate-fadeout class to the div, but it's not working. I am using Tailwind CSS, here is my config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      scale: {
        '65': '0.65',
      },
      // animation class
      animation: {
        fadeout: 'fadeOut 1s ease-in-out',
        fadein: 'fadeIn 1s ease-in-out',
      },
      // actual animation
      keyframes: {
        fadeOut: {
          '0%': { opacity: 100 },
          '100%': { opacity: 0 },
        },
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 100 },
        },
      },
    },
  },
  plugins: [],
}

Here is my HTML:

      <div id="item1" class="carousel-item">
        <img src="images/temp.jpg" class="absolute block w-full">
        <div class="text-shadow-custom pl-72 pr-72 w-full h-full flex flex-col items-center justify-center absolute">
          <p class="text-center text-white text-2xl font-bold">TEST TEXT</p>
          <p class="text-center text-white text-xl">Test description</p>
          <a href="#" class="mt-8 p-2 rounded bg-red-600 text-white">LEARN MORE</a>
        </div>
      </div>

And my javascript is literally just this:

$('#item1').addClass('animate-fadeout');

But nothing happens. No animation, and the animate-fadeout class doesn't even appear in the styles tab in developer tools.

When I put the animate-fadeout class directly into the div like this <div id="item1" class="carousel-item animate-fadeout"> and refresh the page, it works perfectly. I really am lost as to why this isn't working. Help is appreciated!