import type { Config } from 'tailwindcss'
const config: Config = {
darkMode: 'class',
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
black: '#000000',
white: '#FFFFFF',
gray: {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#D1D5DB',
400: '#9CA3AF',
500: '#6B7280',
600: '#4B5563',
700: '#374151',
800: '#1F2937',
900: '#111827',
950: '#030712',
},
brand: {
50: '#F0F9FF',
100: '#E0F2FE',
500: '#0EA5E9',
600: '#0284C7',
700: '#0369A1',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'Menlo', 'monospace'],
},
fontSize: {
'display-xl': ['5rem', { lineHeight: '1', letterSpacing: '-0.04em' }],
'display-lg': ['4rem', { lineHeight: '1.1', letterSpacing: '-0.03em' }],
'display-md': ['3rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
'display-sm': ['2.25rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
},
animation: {
'fade-in-up': 'fadeInUp 0.6s ease-out',
'fade-in': 'fadeIn 0.4s ease-out',
'slide-in-right': 'slideInRight 0.5s ease-out',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideInRight: {
'0%': { opacity: '0', transform: 'translateX(20px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
},
backdropBlur: {
xs: '2px',
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
],
}
export default config
