ai-vue3-admin/tailwind.config.js
2025-12-10 16:26:45 +08:00

144 lines
5.3 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
glow: 'hsl(var(--primary-glow))',
light: 'hsl(var(--primary-light))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
glass: 'hsl(var(--glass))',
'glass-border': 'hsl(var(--glass-border))',
'white-soft': 'hsl(var(--white-soft))',
'dept-structure': {
DEFAULT: 'hsl(var(--dept-structure))',
light: 'hsl(var(--dept-structure-light))',
glow: 'hsl(var(--dept-structure-glow))',
},
'dept-thermal': {
DEFAULT: 'hsl(var(--dept-thermal))',
light: 'hsl(var(--dept-thermal-light))',
glow: 'hsl(var(--dept-thermal-glow))',
},
'dept-control': {
DEFAULT: 'hsl(var(--dept-control))',
light: 'hsl(var(--dept-control-light))',
glow: 'hsl(var(--dept-control-glow))',
},
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
backgroundImage: {
'gradient-primary': 'var(--gradient-primary)',
'gradient-glow': 'var(--gradient-glow)',
'gradient-card': 'var(--gradient-card)',
'gradient-success': 'var(--gradient-success)',
'gradient-thermal': 'var(--gradient-thermal)',
'gradient-control': 'var(--gradient-control)',
'gradient-structure': 'var(--gradient-structure)',
'gradient-sidebar': 'var(--gradient-sidebar)',
'gradient-glass': 'var(--gradient-glass)',
},
boxShadow: {
'sm': 'var(--shadow-sm)',
'md': 'var(--shadow-md)',
'lg': 'var(--shadow-lg)',
'xl': 'var(--shadow-xl)',
'glow': 'var(--shadow-glow)',
'glow-structure': 'var(--shadow-glow-structure)',
'glow-thermal': 'var(--shadow-glow-thermal)',
'glow-control': 'var(--shadow-glow-control)',
'card': 'var(--shadow-card)',
'elevated': 'var(--shadow-elevated)',
'glass': 'var(--shadow-glass)',
'neumorphic': 'var(--shadow-neumorphic)',
'neumorphic-hover': 'var(--shadow-neumorphic-hover)',
'neumorphic-inset': 'var(--shadow-neumorphic-inset)',
'neumorphic-light': 'var(--shadow-neumorphic-light)',
'neumorphic-raised': 'var(--shadow-neumorphic-raised)',
'liquid': 'var(--shadow-liquid)',
'liquid-hover': 'var(--shadow-liquid-hover)',
},
backdropBlur: {
sm: 'var(--backdrop-blur-sm)',
md: 'var(--backdrop-blur-md)',
lg: 'var(--backdrop-blur-lg)',
xl: 'var(--backdrop-blur-xl)',
},
transitionDuration: {
smooth: 'var(--transition-smooth)',
spring: 'var(--transition-spring)',
drawer: 'var(--transition-drawer)',
liquid: 'var(--transition-liquid)',
bounce: 'var(--transition-bounce)',
},
animation: {
'blob-float': 'blob-float 20s ease-in-out infinite',
'blob-float-2': 'blob-float-2 25s ease-in-out infinite',
'blob-float-3': 'blob-float-3 30s ease-in-out infinite',
},
keyframes: {
'blob-float': {
'0%, 100%': { transform: 'translate(0, 0) scale(1) rotate(0deg)' },
'25%': { transform: 'translate(20px, -30px) scale(1.05) rotate(2deg)' },
'50%': { transform: 'translate(-15px, 25px) scale(0.95) rotate(-1deg)' },
'75%': { transform: 'translate(30px, 15px) scale(1.02) rotate(1deg)' },
},
'blob-float-2': {
'0%, 100%': { transform: 'translate(0, 0) scale(1) rotate(0deg)' },
'33%': { transform: 'translate(-25px, 20px) scale(0.98) rotate(-2deg)' },
'66%': { transform: 'translate(15px, -20px) scale(1.03) rotate(1deg)' },
},
'blob-float-3': {
'0%, 100%': { transform: 'translate(0, 0) scale(1) rotate(0deg)' },
'20%': { transform: 'translate(25px, 30px) scale(1.04) rotate(1.5deg)' },
'40%': { transform: 'translate(-20px, -15px) scale(0.96) rotate(-1.5deg)' },
'60%': { transform: 'translate(-10px, 25px) scale(1.01) rotate(0.5deg)' },
'80%': { transform: 'translate(20px, -10px) scale(0.99) rotate(-0.5deg)' },
},
},
},
},
plugins: [],
}