60 lines
1.9 KiB
JavaScript
60 lines
1.9 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)',
|
|
}
|
|
},
|
|
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 rgba(29, 185, 84, 0.3)' },
|
|
'100%': { boxShadow: '0 0 30px rgba(29, 185, 84, 0.6)' },
|
|
},
|
|
'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: [],
|
|
}
|