添加Tailwind自定义配置
This commit is contained in:
bakaECC
parent
68421e20be
commit
93fdb36d74
143
tailwind.config.js
Normal file
143
tailwind.config.js
Normal file
@ -0,0 +1,143 @@
|
||||
/** @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: [],
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user