анимировать при прокрутке на локальном хосте, но не на живом сайте

Question

У меня есть сайт RedwoodJS, на котором я бы хотел, чтобы каждый элемент страницы анимировался при прокрутке. Я использую TailwindCSS. Меня вдохновил этот пост в блоге. Я могу заставить «анимацию при прокрутке» работать на локальном хосте, но не на живом сайте.

Вот мой код:

      import { Link, routes } from '@redwoodjs/router'

import Footer from '../../components/Footer'

const HomePage = () => {
  const callback = function (entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-fadeIn')
      } else {
        entry.target.classList.remove('animate-fadeIn')
      }
    })
  }

  const observer = new IntersectionObserver(callback)

  const targets = document.querySelectorAll('.js-show-on-scroll')
  targets.forEach(function (target) {
    target.classList.add('opacity-0')
    observer.observe(target)
  })

  return (
    <div>
     <div className="rounded-lg shadow-lg mb-2 h-screen flex flex-col content-center text-xs bg-blue-300 js-show-on-scroll md:text-base">
     {I have three of these screen height elements that I want to fade in over 3.5 seconds}
     </div>
     <div className="rounded-lg shadow-lg mb-2 h-screen flex flex-col content-center text-xs bg-blue-300 js-show-on-scroll md:text-base">
     {for sake of brevity I am not showing all of my code, these are just the snippets. Link to the repo is added below}
     </div>
    </div>
  )
};

export default HomePage

Я обратился к автору, чтобы узнать, почему это не работает, и он предположил, что, возможно, я полагался на классы CSS, которые очищались в процессе производства. Я не уверен на 100%, как это проверить (кроме включения очистки файла, что я сделал). Вот полный tailwind.config.js файл:

      const heropatterns = require('tailwindcss-hero-patterns/src/patterns')
const colors = require('tailwindcss/colors')

module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.js'],
  },
  darkMode: 'media',
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
      blue: colors.blue,
    },
    linearGradientColors: (theme) => theme('colors'),
    heroPatterns: {
      topography: heropatterns.topography,
    },
    heroPatternsShades: ['100', '300', '500'],
    heroPatternsColors: ['blue'],
    extend: {
      animation: {
        fadeIn: 'fadeIn 3s ease-in forwards',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },
      },
      colors: {
        blue: {
          500: '#4391cdff',
        },
      },
    },
  },
  variants: {},
  plugins: [
    require('tailwindcss-hero-patterns'),
    require('tailwindcss-gradients'),
  ],
}

Будем признательны за любые рекомендации или предложения о том, как заставить эту работу работать. Вот ссылка на мое репо, если вы хотите увидеть полный код. Приветствую и спасибо.