client-wms-board/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Tailwind 会扫描这些文件，找出所有使用的工具类（如 bg-blue-500）
    // 只生成用到的样式，未使用的不会打包（Tree-shaking）
    "./public/index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],

  // 这些类名强制保留，即使扫描时没发现使用
  // 用于动态类名（如 :class="getButtonClass(color)"）
  // 使用原因：因为类名是动态拼接的，Tailwind 扫描时可能识别不出来，所以需要在 safelist 中手动声明。
  safelist: [
    // 统计卡片颜色
    'border-blue-500',
    'border-green-500',
    'border-yellow-500',
    'border-purple-500',
    'bg-blue-100',
    'bg-green-100',
    'bg-yellow-100',
    'bg-purple-100',
    'text-blue-500',
    'text-green-500',
    'text-yellow-500',
    'text-purple-500',
    'text-red-500',
    // 底部按钮颜色
    'bg-blue-500',
    'bg-green-500',
    'bg-yellow-500',
    'bg-red-500',
    'hover:bg-blue-600',
    'hover:bg-green-600',
    'hover:bg-yellow-600',
    'hover:bg-red-600',
  ],

  // theme（主题扩展）
  // 自定义颜色和圆角大小
  // 可以使用 bg-primary、rounded-button 等自定义类名
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#60a5fa'
      },
      borderRadius: {
        'none': '0px',
        'sm': '2px',
        DEFAULT: '4px',
        'md': '8px',
        'lg': '12px',
        'xl': '16px',
        '2xl': '20px',
        '3xl': '24px',
        'full': '9999px',
        'button': '4px'
      }
    },
  },
  plugins: [],
}