the initial toast is not animating (enter and exit) but the consequent toasts do in nextjs.

[axerivant]

The initial toast is not animating, it just pops up but if more toasts are triggered while it is still displayed, they enter and exit smoothly. I'm using toast.custom() but I tried the presets and they behave similarly.

FYI:

• The <Toaster /> is placed in the root of the nextjs project(_app.js), but I tried placing it on a single page but no luck., same behaviour.
• dev-env: NextJS @latest | no TypeScript

[kharithomas]

I had a similar issue when using Tailwind v3 and Hot-Toast. The solution was tweaking the css animate-fill properties for me.

toast.custom((t) => (
  <div
    className={`${
      t.visible ? "animate-enter" : "animate-leave"
    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
  >
// ... remaining code below

Turns out the docs where a bit incomplete as animate-enter and animate-leave aren't default tailwind classes.

I was easily able to get my desired result by adding these to my tailwind.config.js

animation: {        
  enter: "fadeInRight 300ms ease-out",
  leave: "fadeOutLeft 300ms ease-in forwards"
},
keyframes: {        
  fadeInRight: {
    "0%": {
      opacity: "0",
      transform: "translate(2rem)"
    },
    "100%": {
      opacity: "1",
      transform: "translate(0)"
    }
  },
  fadeOutLeft: {
    "0%": {
      opacity: "1"
    },
    "100%": {
      opacity: "0"
    }
  }
},

Result:

[TrejoCode]

I had a similar issue when using Tailwind v3 and Hot-Toast. The solution was tweaking the css animate-fill properties for me.

toast.custom((t) => (
  <div
    className={`${
      t.visible ? "animate-enter" : "animate-leave"
    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
  >
// ... remaining code below

Turns out the docs where a bit incomplete as animate-enter and animate-leave aren't default tailwind classes.

I was easily able to get my desired result by adding these to my tailwind.config.js

animation: {        
  enter: "fadeInRight 300ms ease-out",
  leave: "fadeOutLeft 300ms ease-in forwards"
},
keyframes: {        
  fadeInRight: {
    "0%": {
      opacity: "0",
      transform: "translate(2rem)"
    },
    "100%": {
      opacity: "1",
      transform: "translate(0)"
    }
  },
  fadeOutLeft: {
    "0%": {
      opacity: "1"
    },
    "100%": {
      opacity: "0"
    }
  }
},

Result:

Must be placed:

theme: {
     // ...rest of conf
    extend: {
      animation: {
        enter: 'fadeInRight 300ms ease-out',
        leave: 'fadeOutLeft 300ms ease-in',
      },
      keyframes: {
        fadeInRight: {
          '0%': {
            opacity: '0',
            transform: 'translate(2rem)',
          },
          '100%': {
            opacity: '1',
            transform: 'translate(0)',
          },
        },
        fadeOutLeft: {
          '0%': {
            opacity: '1',
          },
          '100%': {
            opacity: '0',
          },
        },
      },
    },
  },

[bsor-dev]

Same issue

[alikhalilifar]

There is no animate-enter or animate-leave in TailwindCSS as of right now I'm writing this, To fix this edit your tailwind.config.js and add these:

theme : {
  // ...rest of conf
  extend: {
    animation: {
      enter: "enter .2s ease-out",
      leave: "leave .15s ease-in forwards",
    },
    keyframes: {
      enter: {
        "0%": {
          opacity: "0",
          transform: "scale(.9)",
        },
        "100%": {
          opacity: "1",
          transform: "scale(1)",
        },
      },
      leave: {
        "0%": {
          opacity: "1",
          transform: "scale(1)",
        },
        "100%": {
          opacity: "0",
          transform: "scale(.9)",
        },
      },
    },
  },
};