88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
300: '#7dd3fc',
|
|
400: '#38bdf8',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
800: '#075985',
|
|
900: '#0c4a6e',
|
|
},
|
|
'dark-primary': '#18181b',
|
|
'dark-secondary': '#0f172a',
|
|
'dark-tertiary': '#1e293b',
|
|
accent: {
|
|
DEFAULT: '#164e63',
|
|
hover: '#155e75',
|
|
light: '#0e7490',
|
|
},
|
|
'accent-emerald': {
|
|
DEFAULT: '#064e3b',
|
|
hover: '#065f46',
|
|
},
|
|
'accent-teal': {
|
|
DEFAULT: '#134e4a',
|
|
hover: '#115e59',
|
|
},
|
|
},
|
|
animation: {
|
|
glitch: 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both',
|
|
flicker: 'flicker 0.15s infinite',
|
|
scanline: 'scanline 8s linear infinite',
|
|
noise: 'noise 0.2s infinite',
|
|
},
|
|
keyframes: {
|
|
glitch: {
|
|
'0%': { transform: 'translate(0)' },
|
|
'20%': { transform: 'translate(-2px, 2px)' },
|
|
'40%': { transform: 'translate(-2px, -2px)' },
|
|
'60%': { transform: 'translate(2px, 2px)' },
|
|
'80%': { transform: 'translate(2px, -2px)' },
|
|
'100%': { transform: 'translate(0)' },
|
|
},
|
|
flicker: {
|
|
'0%, 100%': { opacity: '1' },
|
|
'41.99%': { opacity: '1' },
|
|
'42%': { opacity: '0' },
|
|
'43%': { opacity: '0' },
|
|
'43.01%': { opacity: '1' },
|
|
'47.99%': { opacity: '1' },
|
|
'48%': { opacity: '0' },
|
|
'49%': { opacity: '0' },
|
|
'49.01%': { opacity: '1' },
|
|
},
|
|
scanline: {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
noise: {
|
|
'0%, 100%': { backgroundPosition: '0 0' },
|
|
'10%': { backgroundPosition: '-5% -10%' },
|
|
'20%': { backgroundPosition: '-15% 5%' },
|
|
'30%': { backgroundPosition: '7% -25%' },
|
|
'40%': { backgroundPosition: '-5% 25%' },
|
|
'50%': { backgroundPosition: '-15% 10%' },
|
|
'60%': { backgroundPosition: '15% 0%' },
|
|
'70%': { backgroundPosition: '0% 15%' },
|
|
'80%': { backgroundPosition: '3% 35%' },
|
|
'90%': { backgroundPosition: '-10% 10%' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|