Files
DianZhanDemo/app/tailwind.config.js

128 lines
3.0 KiB
JavaScript
Raw Permalink Normal View History

2025-12-11 01:29:41 +08:00
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./app.vue',
'./error.vue',
'./assets/css/**/*.css',
'./types/**/*.ts',
],
theme: {
extend: {
// 自定义主题扩展
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
},
spacing: {
18: '4.5rem',
88: '22rem',
},
backgroundImage: {
Tile2: "url('/images/Tile2.png')",
'footer-texture': "url('/images/footer-texture.png')",
},
},
},
plugins: [
// 可以在这里添加Tailwind插件
// require('@tailwindcss/forms'),
// require('@tailwindcss/typography'),
function ({ addUtilities }) {
addUtilities({
'.vertical-rl': {
'writing-mode': 'vertical-rl',
},
'.upright': {
'text-orientation': 'upright',
},
})
},
],
// 添加对自定义工具类的支持
safelist: [
// 自定义工具类
'vertical-rl',
'upright',
// 九宫格边框相关类
'nine-slice',
'nine-slice-no-fill',
'nine-slice-animated',
'frame-border2',
// 大屏看板相关类
'dashboard-container',
'dashboard-grid',
'dashboard-grid-2x2',
'dashboard-grid-3x3',
'dashboard-grid-4x4',
'dashboard-card',
'dashboard-card-highlight',
'dashboard-card-warning',
'dashboard-card-danger',
'dashboard-title',
'dashboard-subtitle',
'dashboard-metric-title',
'dashboard-metric-large',
'dashboard-metric-medium',
'dashboard-metric-small',
'dashboard-metric-trend-up',
'dashboard-metric-trend-down',
'chart-container',
'chart-container-large',
'chart-container-small',
'dashboard-progress',
'dashboard-progress-bar',
'dashboard-progress-bar-success',
'dashboard-progress-bar-warning',
'dashboard-progress-bar-danger',
'status-indicator',
'status-online',
'status-offline',
'status-warning',
'status-dot',
'status-dot-online',
'status-dot-offline',
'status-dot-warning',
'dashboard-fade-in',
'dashboard-slide-up',
'dashboard-scale-in',
'animate-fade-in',
'animate-slide-up',
'animate-scale-in',
'dashboard-table',
'dashboard-scrollbar',
'dashboard-fullscreen',
'dashboard-split-horizontal',
'dashboard-split-vertical',
'dashboard-align-top',
'dashboard-align-bottom',
'dashboard-align-left',
'dashboard-align-right',
// 背景相关类
'bg-flex-center',
'crud-container',
'crud-header',
'crud-table',
'crud-form',
],
}