music-app/web/tailwind.config.ts
2026-07-03 01:06:35 +00:00

70 lines
2.3 KiB
TypeScript

import type { Config } from 'tailwindcss'
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
'music-black': '#0a0a0a',
'music-dark': '#121212',
'music-card': '#1a1a1a',
'music-border': '#2a2a2a',
'music-muted': '#888888',
'music-text': '#e0e0e0',
'music-text-dim': '#999999',
'music-accent': '#f5c542',
'music-vinyl': '#1a1a2e',
'mood-sad': '#1a2a4a',
'mood-happy': '#f5c542',
'mood-energetic': '#e63946',
'mood-focused': '#2d6a4f',
'mood-chill': '#48957e',
'mood-romantic': '#bc6a7e',
'mood-angry': '#9d0208',
'mood-nostalgic': '#a67c52',
'mood-melancholy': '#5a189c',
'mood-dreamy': '#9b5de5',
},
fontFamily: {
display: ['Space Grotesk', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'vinyl-spin': 'vinyl-spin 3s linear infinite',
'vinyl-spin-slow': 'vinyl-spin 4s linear infinite',
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
'slide-up': 'slide-up 0.3s ease-out',
'slide-down': 'slide-down 0.3s ease-out',
'fade-in': 'fade-in 0.2s ease-out',
},
keyframes: {
'vinyl-spin': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
'pulse-glow': {
'0%, 100%': { opacity: '0.6' },
'50%': { opacity: '1' },
},
'slide-up': {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
'slide-down': {
'0%': { transform: 'translateY(-20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
},
backgroundImage: {
'radial-glow': 'radial-gradient(circle, rgba(245,197,66,0.15) 0%, transparent 70%)',
'vinyl-groove': 'repeating-radial-gradient(#1a1a2e 0px, #1a1a2e 2px, #16162a 3px, #16162a 4px)',
},
},
},
plugins: [],
} satisfies Config