You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.8 KiB
96 lines
2.8 KiB
2 months ago
|
/** @type {import('tailwindcss').Config} */
|
||
|
|
export default {
|
||
|
|
content: [
|
||
|
|
"./index.html",
|
||
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||
|
|
],
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
// 主色调 - 青色
|
||
|
|
'cyan': {
|
||
|
|
DEFAULT: '#00d4ff',
|
||
|
|
dim: '#00a8cc',
|
||
|
|
glow: 'rgba(0, 212, 255, 0.4)',
|
||
|
|
},
|
||
|
|
// 辅助色 - 紫色
|
||
|
|
'purple': {
|
||
|
|
DEFAULT: '#6f61f1',
|
||
|
|
dim: '#533483',
|
||
|
|
glow: 'rgba(168, 85, 247, 0.3)',
|
||
|
|
},
|
||
|
|
// 状态色
|
||
|
|
'success': '#00ff88',
|
||
|
|
'warning': '#ffaa00',
|
||
|
|
'danger': '#ff4466',
|
||
|
|
// 背景色
|
||
|
|
'base': '#08080c',
|
||
|
|
'card': '#0d0d14',
|
||
|
|
'elevated': '#12121a',
|
||
|
|
'hover': '#1a1a24',
|
||
|
|
// 文字色
|
||
|
|
'primary': '#ffffff',
|
||
|
|
'secondary': '#a0a0b0',
|
||
|
|
'muted': '#606070',
|
||
|
|
// 边框色
|
||
|
|
'border': {
|
||
|
|
dim: 'rgba(255, 255, 255, 0.06)',
|
||
|
|
DEFAULT: 'rgba(255, 255, 255, 0.1)',
|
||
|
|
accent: 'rgba(0, 212, 255, 0.3)',
|
||
|
|
purple: 'rgba(168, 85, 247, 0.3)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
backgroundImage: {
|
||
|
|
'gradient-purple-cyan': 'linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%)',
|
||
|
|
'gradient-card-border': 'linear-gradient(180deg, rgba(168, 85, 247, 0.4) 0%, rgba(168, 85, 247, 0.1) 50%, rgba(0, 212, 255, 0.2) 100%)',
|
||
|
|
'gradient-cyan': 'linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%)',
|
||
|
|
},
|
||
|
|
boxShadow: {
|
||
|
|
'glow-cyan': '0 0 20px rgba(0, 212, 255, 0.4)',
|
||
|
|
'glow-purple': '0 0 20px rgba(168, 85, 247, 0.3)',
|
||
|
|
'glow-success': '0 0 20px rgba(0, 255, 136, 0.3)',
|
||
|
|
'glow-danger': '0 0 20px rgba(255, 68, 102, 0.3)',
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
'xl': '12px',
|
||
|
|
'2xl': '16px',
|
||
|
|
'3xl': '20px',
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
'xxs': '10px',
|
||
|
|
'label': '11px',
|
||
|
|
},
|
||
|
|
spacing: {
|
||
|
|
'18': '4.5rem',
|
||
|
|
'22': '5.5rem',
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
'fade-in': 'fadeIn 0.3s ease-out',
|
||
|
|
'slide-up': 'slideUp 0.4s ease-out',
|
||
|
|
'slide-in-right': 'slideInRight 0.3s ease-out',
|
||
|
|
'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
|
||
|
|
'spin-slow': 'spin 2s linear infinite',
|
||
|
|
},
|
||
|
|
keyframes: {
|
||
|
|
fadeIn: {
|
||
|
|
'from': { opacity: '0' },
|
||
|
|
'to': { opacity: '1' },
|
||
|
|
},
|
||
|
|
slideUp: {
|
||
|
|
'from': { opacity: '0', transform: 'translateY(10px)' },
|
||
|
|
'to': { opacity: '1', transform: 'translateY(0)' },
|
||
|
|
},
|
||
|
|
slideInRight: {
|
||
|
|
'from': { opacity: '0', transform: 'translateX(100%)' },
|
||
|
|
'to': { opacity: '1', transform: 'translateX(0)' },
|
||
|
|
},
|
||
|
|
pulseGlow: {
|
||
|
|
'0%, 100%': { boxShadow: '0 0 20px rgba(0, 212, 255, 0.4)' },
|
||
|
|
'50%': { boxShadow: '0 0 40px rgba(0, 212, 255, 0.6)' },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plugins: [],
|
||
|
|
}
|