tailwind.config.js•6.34 kB
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Inter', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
fontSize: {
'xs': ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.025em' }],
'sm': ['0.875rem', { lineHeight: '1.25rem', letterSpacing: '0.025em' }],
'base': ['1rem', { lineHeight: '1.5rem', letterSpacing: '0.025em' }],
'lg': ['1.125rem', { lineHeight: '1.75rem', letterSpacing: '0.025em' }],
'xl': ['1.25rem', { lineHeight: '1.75rem', letterSpacing: '0.025em' }],
'2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '0.025em' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '0.025em' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '0.025em' }],
'5xl': ['3rem', { lineHeight: '1', letterSpacing: '0.025em' }],
'6xl': ['3.75rem', { lineHeight: '1', letterSpacing: '0.025em' }],
'7xl': ['4.5rem', { lineHeight: '1', letterSpacing: '0.025em' }],
'8xl': ['6rem', { lineHeight: '1', letterSpacing: '0.025em' }],
'9xl': ['8rem', { lineHeight: '1', letterSpacing: '0.025em' }],
},
fontWeight: {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
lineHeight: {
'tight': '1.25',
'snug': '1.375',
'normal': '1.5',
'relaxed': '1.625',
'loose': '2',
},
letterSpacing: {
'tighter': '-0.05em',
'tight': '-0.025em',
'normal': '0em',
'wide': '0.025em',
'wider': '0.05em',
'widest': '0.1em',
},
colors: {
// Professional Light Color System - Matching Image Theme
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
950: '#172554',
},
accent: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7c3aed',
800: '#6b21a8',
900: '#581c87',
950: '#3b0764',
},
// Professional grays
gray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
950: '#030712',
},
// Status colors with professional styling - Matching Image
success: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#10b981',
600: '#059669',
700: '#047857',
800: '#065f46',
900: '#064e3b',
},
warning: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
},
danger: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
},
info: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
// Button colors matching image theme
button: {
primary: '#86a0ff', // New custom blue for primary actions
secondary: '#f3f4f6', // Light gray for secondary
success: '#10b981', // Green for success
danger: '#ef4444', // Red for danger
warning: '#f59e0b', // Orange for warning
light: '#f3f4f6', // Light gray for subtle actions
}
},
backgroundColor: {
'glass': 'rgba(255, 255, 255, 0.9)',
'glass-dark': 'rgba(248, 250, 252, 0.8)',
},
backdropBlur: {
'xs': '2px',
'glass': '20px',
},
boxShadow: {
'glass': '0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 6px rgba(0, 0, 0, 0.04)',
'glass-hover': '0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06)',
'glow-blue': '0 0 24px rgba(59, 130, 246, 0.15)',
'glow-purple': '0 0 24px rgba(168, 85, 247, 0.15)',
'glow-green': '0 0 24px rgba(16, 185, 129, 0.15)',
'glow-red': '0 0 24px rgba(239, 68, 68, 0.15)',
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'pulse-glow': 'pulseGlow 2s ease-in-out infinite alternate',
'float': 'float 3s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
pulseGlow: {
'0%': { boxShadow: '0 0 5px rgba(59, 130, 246, 0.2)' },
'100%': { boxShadow: '0 0 20px rgba(59, 130, 246, 0.4)' },
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-4px)' },
},
},
borderRadius: {
'xl': '12px',
'2xl': '16px',
'3xl': '24px',
},
},
},
plugins: [
require('@tailwindcss/forms'),
],
}
