97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
spotify: {
|
|
green: '#1db954',
|
|
dark: '#191414',
|
|
gray: '#282828',
|
|
lightgray: '#b3b3b3',
|
|
},
|
|
glass: {
|
|
white: 'rgba(255, 255, 255, 0.1)',
|
|
black: 'rgba(0, 0, 0, 0.2)',
|
|
border: 'rgba(255, 255, 255, 0.2)',
|
|
},
|
|
theme: {
|
|
green: {
|
|
primary: '#1db954',
|
|
secondary: '#1ed760',
|
|
accent: '#00e676',
|
|
},
|
|
pink: {
|
|
primary: '#ec4899',
|
|
secondary: '#f472b6',
|
|
accent: '#fb7185',
|
|
},
|
|
blue: {
|
|
primary: '#3b82f6',
|
|
secondary: '#60a5fa',
|
|
accent: '#93c5fd',
|
|
},
|
|
red: {
|
|
primary: '#dc2626',
|
|
secondary: '#ef4444',
|
|
accent: '#f87171',
|
|
},
|
|
purple: {
|
|
primary: '#8b5cf6',
|
|
secondary: '#a78bfa',
|
|
accent: '#c4b5fd',
|
|
},
|
|
yellow: {
|
|
primary: '#eab308',
|
|
secondary: '#f59e0b',
|
|
accent: '#fbbf24',
|
|
},
|
|
turquoise: {
|
|
primary: '#06b6d4',
|
|
secondary: '#22d3ee',
|
|
accent: '#67e8f9',
|
|
},
|
|
}
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
animation: {
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'bounce-slow': 'bounce 3s infinite',
|
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
|
'wave-flow': 'wave-flow 8s ease-in-out infinite',
|
|
'bubble-float': 'bubble-float 6s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-20px)' },
|
|
},
|
|
glow: {
|
|
'0%': { boxShadow: '0 0 20px var(--theme-primary)' },
|
|
'100%': { boxShadow: '0 0 30px var(--theme-primary)' },
|
|
},
|
|
'wave-flow': {
|
|
'0%, 100%': { transform: 'translateY(0px) translateX(0px) scale(1)', opacity: '0.3' },
|
|
'25%': { transform: 'translateY(-50px) translateX(30px) scale(1.1)', opacity: '0.6' },
|
|
'50%': { transform: 'translateY(-20px) translateX(-20px) scale(0.9)', opacity: '0.4' },
|
|
'75%': { transform: 'translateY(-80px) translateX(40px) scale(1.2)', opacity: '0.7' },
|
|
},
|
|
'bubble-float': {
|
|
'0%, 100%': { transform: 'translateY(0px) scale(1)', opacity: '0.5' },
|
|
'50%': { transform: 'translateY(-20px) scale(1.1)', opacity: '0.8' },
|
|
}
|
|
},
|
|
fontFamily: {
|
|
'spotify': ['Circular', 'Helvetica', 'Arial', 'sans-serif'],
|
|
}
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|