new-home/tailwind.config.js
2025-01-22 20:58:52 -03:00

40 lines
1.3 KiB
JavaScript
Executable File

/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
keyframes: {
glitch: {
'0%, 100%': { transform: 'translateX(0)' },
'20%': { transform: 'translateX(-2px)' },
'40%': { transform: 'translateX(2px)' },
'60%': { transform: 'skewX(2deg)' },
'80%': { transform: 'skewX(-2deg)' },
},
'glitch-1': {
'0%, 100%': { clip: 'rect(44px, 450px, 56px, 0)' },
'20%': { clip: 'rect(12px, 450px, 32px, 0)' },
'40%': { clip: 'rect(62px, 450px, 84px, 0)' },
'60%': { clip: 'rect(22px, 450px, 11px, 0)' },
'80%': { clip: 'rect(59px, 450px, 71px, 0)' },
},
'glitch-2': {
'0%, 100%': { clip: 'rect(24px, 450px, 36px, 0)' },
'20%': { clip: 'rect(82px, 450px, 92px, 0)' },
'40%': { clip: 'rect(32px, 450px, 44px, 0)' },
'60%': { clip: 'rect(72px, 450px, 81px, 0)' },
'80%': { clip: 'rect(19px, 450px, 31px, 0)' },
},
},
animation: {
'glitch': 'glitch 1s infinite',
'glitch-1': 'glitch-1 0.8s infinite',
'glitch-2': 'glitch-2 0.8s infinite',
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
};