Tailwind fade in background as it changes

Question

I'm trying to loop through some background images on my astro site, its set up like this.

const backgroundClasses = {
  deliver: 'bg-deliver animate-fade',
  design: 'bg-design animate-fade',
  develop: 'bg-develop animate-fade'
}

const OurValues = () => {
  const [selected, setSelected] = useState('none')

  useEffect(() => {
    const timeout = setInterval(() => {
      if (selected === 'none') setSelected('design')
      if (selected === 'design') setSelected('develop')
      if (selected === 'develop') setSelected('deliver')
      if (selected === 'deliver') setSelected('none')
    }, 3000)

    return () => {
      clearInterval(timeout)
    }
  }, [selected])
  return (
    <div
      className={`pb-32 bg-black bg-cover bg-no-repeat bg-right ${
        selected === 'none' ? 'bg-black' : backgroundClasses[selected]
      } `}
    >

My Config with the opacity for the background(unsure if I can do this or not)

Currently the background is changing for me. As I'm looping through it, however its just appearing with no kind of nice fade in.

module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'sans-serif', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        beige: '#F0ECE8'
      },
      backgroundImage: {
        hero: "url('background.webp')",
        design: "url('design.webp')",
        develop: "url('develop.webp')",
        deliver: "url('deliver.webp')"
      },
      animation: {
        text: 'text 5s ease infinite',
        fade: 'fadeIn 5s ease-in-out'
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center'
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center'
          }
        },
        fadeIn: (theme) => ({
          '0%': { '--tw-bg-opacity': '0%' },
          '100%': { '--tw-bg-opacity': '100%' }
        })
      }
    }
  },
  plugins: []
}

Answer 1

Sorry, I can't comment. Missing some point of reputation...

You definitely can add custom keyframes and animations in your tailwind.config file, and it's supposed to work fine.

However, I'm not sure why you'd need an arrow function (theme) =>... Maybe try to make your keyframes this way:

keyframes: {
   'fade-in': {
      'from': {
         opacity: '0'
      },
      'to': {
         opacity: '1'
      },
   },
}
animation: {
   'fade-in': 'fade-in 0.5s ease-out'
}