Fade in animation in Tailwind CSS

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
	theme: {
		extend: {
      
			animation: {
				fade: 'fadeIn .5s ease-in-out',
			},

			keyframes: {
				fadeIn: {
					from: { opacity: 0 },
					to: { opacity: 1 },
				},
			},
		},
	},
	plugins: [],
};

+1

Nice 👍

So how do I use this?

So how do I use this?

See https://tailwindcss.com/docs/animation#customizing-your-theme

After you extend the tailwind config, you can add the animate-fade class to a div (in addition to the built-ins like animate-ping, animate-pulse, etc.).

nice, i get it

Thank you!

Great. Thank you 🤩

good things, Thank you!