Tailwind CSS shadow and transition not working after JIT mode enabled

I just enabled tailwind JIT mode for my project, and the transition stopped working and the shadow disappeared. I carefully watched and followed their direction on Youtube but cannot find a solution. If anybody has any suggestions, it'd be very appreciated.

This is the transition stopped working. Transform and translate-x-full seems not working anymore.

 <span className='relative'>
          <span className='block w-10 h-6 bg-gray-200 rounded-full shadow-inner'></span>
          <span
            className={`${
              theme === 'dark' ? 'bg-indigo-400 transform translate-x-full' : 'bg-white'
            } absolute block w-4 h-4 mt-1 ml-1  rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition transform duration-300 ease-in-out`}
          >
            <input
              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
              className='absolute opacity-0 w-0 h-0'
            />
          </span>
        </span>

And this is the tailwind config:

const colors = require('tailwindcss/colors')
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './src/*.{js,jsx,ts,tsx}', './public/index.html'],
  
  darkMode: 'class',
  theme: {
    extend: {
      backgroundColor: {
        primary: 'var(--color-bg-primary)',
        secondary: 'var(--color-bg-secondary)',
      
      },
      textColor: {
        accent: 'var(--color-text-accent)',
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
        
      },
      container: {
      },
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.coolGray,
      indigo: colors.indigo,
      white: colors.white,
    },
  },
  variants: {
    extend: {
      backgroundImage: ['dark'],
    },
  },
  plugins: [],
}

I also added @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; in the index.css.