tailwind.config.js

module.exports = {
	content: ['./src/**/*.{js,ts,jsx,tsx}'],
	darkMode: 'class',
	theme: {
		fontSize: {
			xs: '.75rem',
			sm: '.875rem',
			tiny: '.875rem',
			base: '1rem',
			lg: '1.125rem',
			xl: '1.25rem',
			'2xl': '1.5rem',
			'3xl': '1.875rem',
			'4xl': '2.5rem',
			'5xl': '3rem',
			'6xl': '4rem',
			'7xl': '5rem',
		},
		extend: {
			fontFamily: {
				sans: ['Poppins'],
			},
			keyframes: {
				wave: {
					'0%': { transform: 'rotate(0.0deg)' },
					'10%': { transform: 'rotate(14deg)' },
					'20%': { transform: 'rotate(-8deg)' },
					'30%': { transform: 'rotate(14deg)' },
					'40%': { transform: 'rotate(-4deg)' },
					'50%': { transform: 'rotate(10.0deg)' },
					'60%': { transform: 'rotate(0.0deg)' },
					'100%': { transform: 'rotate(0.0deg)' },
				},
				'rocket-flight': {
					'0%, 100%': {
						transform: 'translateY(0) rotate(-45deg)',
					},
					'25%': {
						transform: 'translateY(-10px) rotate(-50deg)',
					},
					'50%': {
						transform: 'translateY(0) rotate(-45deg)',
					},
					'75%': {
						transform: 'translateY(10px) rotate(-40deg)',
					},
				},
			},
			animation: {
				'waving-hand': 'wave 2s linear infinite',
				'flying-rocket': 'rocket-flight 1.5s ease-in-out infinite',
			},
		},
	},
	plugins: [],
};