79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
||
export default {
|
||
content: [
|
||
"./index.html",
|
||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||
],
|
||
theme: {
|
||
extend: {
|
||
// 自定义颜色主题
|
||
colors: {
|
||
primary: {
|
||
DEFAULT: '#6B46C1', // 深紫色
|
||
light: '#A78BFA', // 浅紫色
|
||
dark: '#553C9A', // 更深的紫色
|
||
},
|
||
secondary: {
|
||
DEFAULT: '#1F2937', // 深灰色
|
||
light: '#4B5563', // 中灰色
|
||
lighter: '#9CA3AF', // 浅灰色
|
||
},
|
||
background: {
|
||
DEFAULT: '#F3F4F6', // 浅灰色背景
|
||
dark: '#111827', // 深色背景
|
||
card: '#FFFFFF', // 卡片背景
|
||
}
|
||
},
|
||
// 响应式断点配置
|
||
screens: {
|
||
'xs': '475px', // 超小屏
|
||
'sm': '640px', // 小屏（手机横屏）
|
||
'md': '768px', // 中屏（平板）
|
||
'lg': '1024px', // 大屏（桌面）
|
||
'xl': '1280px', // 超大屏
|
||
'2xl': '1536px', // 超超大屏
|
||
},
|
||
// 字体配置
|
||
fontFamily: {
|
||
'sans': ['Inter', 'system-ui', 'sans-serif'],
|
||
},
|
||
// 间距配置（8px网格系统）
|
||
spacing: {
|
||
'18': '4.5rem',
|
||
'88': '22rem',
|
||
'128': '32rem',
|
||
},
|
||
// 圆角配置
|
||
borderRadius: {
|
||
'4xl': '2rem',
|
||
},
|
||
// 阴影配置
|
||
boxShadow: {
|
||
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||
'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||
},
|
||
// 动画配置
|
||
animation: {
|
||
'fade-in': 'fadeIn 0.2s ease-in-out',
|
||
'slide-up': 'slideUp 0.3s ease-out',
|
||
},
|
||
keyframes: {
|
||
fadeIn: {
|
||
'0%': { opacity: '0' },
|
||
'100%': { opacity: '1' },
|
||
},
|
||
slideUp: {
|
||
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: [],
|
||
// 暗黑模式支持
|
||
darkMode: 'class',
|
||
// 兼容性配置
|
||
corePlugins: {
|
||
preflight: true,
|
||
},
|
||
} |