We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
If I try the sample from the webpage. My toast appears and it is styled, but there is no animation in or out.
"tailwindcss": "^3.0.7", "autoprefixer": "^10.4.0", "react-hot-toast": "^2.2.0",
toast.custom((t) => ( <div className={`bg-white px-6 py-4 shadow-md rounded-full ${ t.visible ? 'animate-enter' : 'animate-leave' }`} > Hello TailwindCSS! 👋 </div> ));
I also extended my tailwind.config.js with animate-enter and animate-leave, which I got from this repo (https://github.com/timolins/react-hot-toast/blob/main/site/tailwind.config.js) :
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', 'slide-in': 'slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)', leave: 'leave 150ms ease-in forwards', }, 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'), ], }
The text was updated successfully, but these errors were encountered:
Same issue here. No luck with it animating aside from using the default toast and not the custom one.
Sorry, something went wrong.
This issue seems to be caused by TailwindCSS not generating the necessary styles.
However, I do see it's not ideal that the example on the website is not easily reproducible.
Is this related to to #187?
No branches or pull requests
If I try the sample from the webpage. My toast appears and it is styled, but there is no animation in or out.
I also extended my tailwind.config.js with animate-enter and animate-leave, which I got from this repo (https://github.com/timolins/react-hot-toast/blob/main/site/tailwind.config.js) :
The text was updated successfully, but these errors were encountered: