/** @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',
  ],
}