toast.custom leave animation does not play, and padding error

I can make this custom toast, and the “enter” animation plays, but the “leave” animation does not. When I click the button on the toast, there is a short delay and then the toast disappears without the animation.

I have confirmed that the animations work, by using them on divs in a page.

The second problem I have is that if I specify p-5 for padding, the padding becomes 0. However, p-4 works.

Setup:

"postcss": "^8.4.5",
"tailwindcss": "^3.0.7",
"react-hot-toast": "^2.2.0",
"next": "latest",

my code to launch a toast

return toast.custom((t) => (
  <div
    className={`${
      t.visible ? 'animate-enter' : 'animate-leave'
    } max-w-md bg-red-500 rounded flex`}
  >
    <div className="flex-1 w-0 p-4">
      <div className="flex items-center">
        <div><XCircleIcon className="h-8 w-8 text-white" aria-hidden="true" /></div>
        <div className="ml-3 text-white white-space-nowrap">
          {message}
        </div>
      </div>
    </div>
    <div className="flex border-l border-white">
      <button
        onClick={() => toast.dismiss(t.id)}
        className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-white font-medium focus:outline-none focus:ring-0"
      >
        Close
      </button>
    </div>
  </div>
), {
  duration:Infinity
})

tailwind config

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      boxShadow: {
        't-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
        't-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1)',
        't-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        't-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        't-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
        't-3xl': '0 -35px 60px -15px rgba(0, 0, 0, 0.3)',
      },
      animation: {
        enter: 'enter 200ms ease-out',
        leave: 'leave 200ms ease-in',
      },
      keyframes: {
        enter: {
          '0%': { transform: 'scale(0.9)', opacity: 0 },
          '100%': { transform: 'scale(1)', opacity: 1 },
        },
        leave: {
          '0%': { transform: 'scale(1)', opacity: 1 },
          '100%': { transform: 'scale(0.9)', opacity: 0 },
        },
        'slide-in': {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('autoprefixer'),
  ],
}

[clam61]

looks like that was the issue. next time i wont gloss over parts of the config file i dont undrstand. thanks everyone.

[shftlvch]

@timolins I think this one is resolved.