88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#fdf4ff',
|
|
100: '#fae8ff',
|
|
200: '#f5d0fe',
|
|
300: '#f0abfc',
|
|
400: '#e879f9',
|
|
500: '#d946ef',
|
|
600: '#c026d3',
|
|
700: '#a21caf',
|
|
800: '#86198f',
|
|
900: '#701a75',
|
|
},
|
|
secondary: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
'marquee': 'marquee 30s linear infinite',
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'pulse-slow': 'pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
marquee: {
|
|
'0%': { transform: 'translateX(100%)' },
|
|
'100%': { transform: 'translateX(-100%)' },
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-10px)' },
|
|
},
|
|
'pulse-slow': {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.5' },
|
|
},
|
|
},
|
|
boxShadow: {
|
|
'glow': '0 0 20px rgba(236, 72, 153, 0.3)',
|
|
'glow-lg': '0 0 40px rgba(236, 72, 153, 0.4)',
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
perspective: {
|
|
'300': '300px',
|
|
'500': '500px',
|
|
'1000': '1000px',
|
|
'2000': '2000px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
function({ addUtilities }) {
|
|
addUtilities({
|
|
'.perspective-300': { perspective: '300px' },
|
|
'.perspective-500': { perspective: '500px' },
|
|
'.perspective-1000': { perspective: '1000px' },
|
|
'.perspective-2000': { perspective: '2000px' },
|
|
'.transform-style-preserve-3d': { 'transform-style': 'preserve-3d' },
|
|
'.transform-style-flat': { 'transform-style': 'flat' },
|
|
'.backface-hidden': { 'backface-visibility': 'hidden' },
|
|
'.backface-visible': { 'backface-visibility': 'visible' },
|
|
})
|
|
}
|
|
],
|
|
} |