117 lines
3.5 KiB
JavaScript
117 lines
3.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: '#7c3aed',
|
|
50: '#f5f3ff',
|
|
100: '#ede9fe',
|
|
200: '#ddd6fe',
|
|
300: '#c4b5fd',
|
|
400: '#a78bfa',
|
|
500: '#8b5cf6',
|
|
600: '#7c3aed',
|
|
700: '#6d28d9',
|
|
800: '#5b21b6',
|
|
900: '#4c1d95',
|
|
},
|
|
secondary: {
|
|
50: '#fafafa',
|
|
100: '#f4f4f5',
|
|
200: '#e4e4e7',
|
|
300: '#d4d4d8',
|
|
400: '#a1a1aa',
|
|
500: '#71717a',
|
|
600: '#52525b',
|
|
700: '#3f3f46',
|
|
800: '#27272a',
|
|
900: '#18181b',
|
|
},
|
|
surface: {
|
|
DEFAULT: 'rgba(15, 23, 42, 0.6)',
|
|
solid: '#0f172a',
|
|
hover: 'rgba(30, 41, 59, 0.7)',
|
|
border: 'rgba(148, 163, 184, 0.1)',
|
|
},
|
|
accent: {
|
|
DEFAULT: '#6366f1',
|
|
light: '#818cf8',
|
|
dark: '#4f46e5',
|
|
glow: 'rgba(99, 102, 241, 0.15)',
|
|
},
|
|
error: {
|
|
DEFAULT: '#ef4444',
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
},
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'88': '22rem',
|
|
'128': '32rem',
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.02)',
|
|
'medium': '0 10px 30px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03)',
|
|
'large': '0 20px 40px -4px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.04)',
|
|
'glow': '0 0 25px rgba(124, 58, 237, 0.25)',
|
|
'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.07)',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.3s ease-out',
|
|
'slide-up': 'slideUp 0.35s ease-out',
|
|
'slide-in-right': 'slideInRight 0.3s ease-out',
|
|
'pulse-slow': 'pulse 3s ease-in-out infinite',
|
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
|
'float': 'float 3s ease-in-out infinite',
|
|
'float-slow': 'floatSlow 5s ease-in-out infinite',
|
|
'glow-pulse': 'glowPulse 2s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(12px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideInRight: {
|
|
'0%': { opacity: '0', transform: 'translateX(12px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
glow: {
|
|
'0%': { boxShadow: '0 0 5px rgba(99, 102, 241, 0.2)' },
|
|
'100%': { boxShadow: '0 0 20px rgba(99, 102, 241, 0.4)' },
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-6px)' },
|
|
},
|
|
floatSlow: {
|
|
'0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
|
|
'50%': { transform: 'translateY(-10px) rotate(1deg)' },
|
|
},
|
|
glowPulse: {
|
|
'0%, 100%': { boxShadow: '0 0 20px rgba(124, 58, 237, 0.3)' },
|
|
'50%': { boxShadow: '0 0 40px rgba(124, 58, 237, 0.5)' },
|
|
},
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|