tailwind.config.js

/** @type {import('tailwindcss').Config} */
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import aspectRatio from '@tailwindcss/aspect-ratio'
import containerQueries from '@tailwindcss/container-queries'

export default {
    content: [
      './index.html',
      './app.vue',
      './src/**/*.{vue,js,ts,jsx,tsx}'
    ],
    theme: {
      extend: {
        // 禾盈慧品牌色彩系统
        colors: {
          'primary-green': '#2E7D32',
          'primary-green-dark': '#215E24', // Darker shade for hover states
          'harvest-yellow': '#F6C945',
          'info-blue': '#1E88E5',
          'success-green': '#2E7D32',
          'warning-yellow': '#F6C445',
          'danger-red': '#D32F2F',
          
          // 中性色调
          neutral: {
            900: '#0B0F14',
            800: '#12171D',
            700: '#1C232B',
            600: '#2A3340',
            500: '#5B6977',
            400: '#C5CFD8',
            300: '#E6EDF3',
            100: '#F6F9FC',
          },
          
          // 语义化颜色
          background: 'var(--background)',
          foreground: 'var(--foreground)',
          card: 'var(--card)',
          'card-foreground': 'var(--card-foreground)',
          popover: 'var(--popover)',
          'popover-foreground': 'var(--popover-foreground)',
          primary: 'var(--primary)',
          'primary-foreground': 'var(--primary-foreground)',
          secondary: 'var(--secondary)',
          'secondary-foreground': 'var(--secondary-foreground)',
          muted: 'var(--muted)',
          'muted-foreground': 'var(--muted-foreground)',
          accent: 'var(--accent)',
          'accent-foreground': 'var(--accent-foreground)',
          destructive: 'var(--destructive)',
          'destructive-foreground': 'var(--destructive-foreground)',
          border: 'var(--border)',
          input: 'var(--input)',
          ring: 'var(--ring)',
        },
        
        // 间距系统 - 桌面端优先
        spacing: {
          '18': '4.5rem',   // 72px
          '88': '22rem',    // 352px
          '112': '28rem',   // 448px
          '128': '32rem',   // 512px
        },
        
        // 字体系统
        fontFamily: {
          sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],
          mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'monospace'],
        },
        
        // 字体大小 - 桌面端优先
        fontSize: {
          'xs': ['0.75rem', { lineHeight: '1rem' }],      // 12px
          'sm': ['0.875rem', { lineHeight: '1.25rem' }],  // 14px
          'base': ['1rem', { lineHeight: '1.5rem' }],     // 16px
          'lg': ['1.125rem', { lineHeight: '1.75rem' }],  // 18px
          'xl': ['1.25rem', { lineHeight: '1.75rem' }],   // 20px
          '2xl': ['1.5rem', { lineHeight: '2rem' }],      // 24px
          '3xl': ['1.875rem', { lineHeight: '2.25rem' }], // 30px
          '4xl': ['2.25rem', { lineHeight: '2.5rem' }],   // 36px
          '5xl': ['3rem', { lineHeight: '1' }],           // 48px
          '6xl': ['3.75rem', { lineHeight: '1' }],        // 60px
          '7xl': ['4.5rem', { lineHeight: '1' }],         // 72px
          '8xl': ['6rem', { lineHeight: '1' }],           // 96px
          '9xl': ['8rem', { lineHeight: '1' }],           // 128px
        },
        
        // 圆角系统
        borderRadius: {
          'sm': '0.75rem',   // 12px
          'md': '1rem',      // 16px
          'lg': '1.5rem',    // 24px
          'xl': '2rem',      // 32px
          '2xl': '2.5rem',   // 40px
          '3xl': '3rem',     // 48px
        },
        
        // 阴影系统
        boxShadow: {
          'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
          'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
          'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
          'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
          '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
          'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
          'glass': '0 8px 32px rgba(0, 0, 0, 0.1)',
          'clay': '0 8px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.05)',
        },
        
        // 背景图片
        backgroundImage: {
          'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
          'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
          'agricultural-pattern': "url('/images/patterns/agricultural-bg.svg')",
          'glass-texture': 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))',
        },
        
        // 动画配置
        animation: {
          'fade-in': 'fadeIn 0.6s ease-out',
          'slide-in-up': 'slideInUp 0.6s ease-out',
          'slide-in-right': 'slideInRight 0.6s ease-out',
          'bounce-soft': 'bounceSoft 2s infinite',
          'pulse-slow': 'pulse 3s infinite',
          'spin-slow': 'spin 3s linear infinite',
          'float': 'float 6s ease-in-out infinite',
          'glow': 'glow 2s ease-in-out infinite alternate',
        },
        
        // 动画关键帧
        keyframes: {
          fadeIn: {
            '0%': { opacity: '0' },
            '100%': { opacity: '1' },
          },
          slideInUp: {
            '0%': { opacity: '0', transform: 'translateY(30px)' },
            '100%': { opacity: '1', transform: 'translateY(0)' },
          },
          slideInRight: {
            '0%': { opacity: '0', transform: 'translateX(30px)' },
            '100%': { opacity: '1', transform: 'translateX(0)' },
          },
          bounceSoft: {
            '0%, 20%, 53%, 80%, 100%': { transform: 'translate3d(0, 0, 0)' },
            '40%, 43%': { transform: 'translate3d(0, -15px, 0)' },
            '70%': { transform: 'translate3d(0, -7px, 0)' },
            '90%': { transform: 'translate3d(0, -2px, 0)' },
          },
          float: {
            '0%, 100%': { transform: 'translateY(0px) rotate(0deg)' },
            '50%': { transform: 'translateY(-20px) rotate(5deg)' },
          },
          glow: {
            '0%': { boxShadow: '0 0 5px rgba(46, 125, 50, 0.5)' },
            '100%': { boxShadow: '0 0 20px rgba(46, 125, 50, 0.8)' },
          },
        },
        
        // 屏幕断点 - 桌面端优先
        screens: {
          'xs': '475px',
          'sm': '640px',
          'md': '768px',
          'lg': '1024px',
          'xl': '1280px',
          '2xl': '1536px',
          '3xl': '1920px',
          '4xl': '2560px',
          
          // 高度断点
          'h-sm': { 'raw': '(min-height: 640px)' },
          'h-md': { 'raw': '(min-height: 768px)' },
          'h-lg': { 'raw': '(min-height: 1024px)' },
          
          // 设备特定断点
          'tablet': '768px',
          'laptop': '1024px',
          'desktop': '1280px',
          'widescreen': '1536px',
        },
        
        // Z-index 层级
        zIndex: {
          '60': '60',
          '70': '70',
          '80': '80',
          '90': '90',
          '100': '100',
        },
        
        // 容器最大宽度
        maxWidth: {
          '8xl': '88rem',   // 1408px
          '9xl': '96rem',   // 1536px
          '10xl': '104rem', // 1664px
        },
        
        // 文本装饰
        textDecorationThickness: {
          3: '3px',
          4: '4px',
          5: '5px',
        },
        
        // 滤镜效果
        backdropBlur: {
          xs: '2px',
          '4xl': '72px',
        },
        
        // 变换
        scale: {
          '102': '1.02',
          '103': '1.03',
          '98': '0.98',
          '97': '0.97',
        },
        
        // 过渡
        transitionDuration: {
          '400': '400ms',
          '600': '600ms',
          '800': '800ms',
          '900': '900ms',
        },
        
        // 透明度
        opacity: {
          '15': '0.15',
          '35': '0.35',
          '65': '0.65',
          '85': '0.85',
        },
      },
    },
    plugins: [
      // 表单插件
      forms({
        strategy: 'class',
      }),
      
      // 排版插件
      typography,
      
      // 长宽比插件
      aspectRatio,
      
      // 容器查询插件
      containerQueries,
      
      // 自定义插件
      function({ addUtilities, addComponents, theme, addBase }) {
        // 添加基础样式
        addBase({
          'html': {
            fontSize: '14px',
            '@screen lg': {
              fontSize: '15px',
            },
            '@screen xl': {
              fontSize: '16px',
            },
          },
        })
        
        // 添加组件样式
        addComponents({
          '.btn': {
            padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
            borderRadius: theme('borderRadius.md'),
            fontWeight: theme('fontWeight.medium'),
            transition: 'all 0.2s ease',
            '&:focus': {
              outline: 'none',
              boxShadow: `0 0 0 2px ${theme('colors.primary')}`,
            },
          },
          '.glass-morphism': {
            background: 'rgba(255, 255, 255, 0.08)',
            backdropFilter: 'blur(16px)',
            WebkitBackdropFilter: 'blur(16px)',
            border: '1px solid rgba(255, 255, 255, 0.2)',
            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
          },
          '.clay-morphism': {
            background: 'linear-gradient(145deg, #ffffff, #f0f0f0)',
            boxShadow: `
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 8px 16px -4px rgba(0, 0, 0, 0.1),
              0 4px 8px -2px rgba(0, 0, 0, 0.05)
            `,
            border: '1px solid rgba(255, 255, 255, 0.3)',
          },
        })
        
        // 添加工具类
        addUtilities({
          '.text-stroke': {
            '-webkit-text-stroke': '1px black',
          },
          '.text-stroke-white': {
            '-webkit-text-stroke': '1px white',
          },
          '.scrollbar-hide': {
            '-ms-overflow-style': 'none',
            'scrollbar-width': 'none',
            '&::-webkit-scrollbar': {
              display: 'none',
            },
          },
          '.scrollbar-thin': {
            '&::-webkit-scrollbar': {
              width: '6px',
            },
            '&::-webkit-scrollbar-track': {
              backgroundColor: theme('colors.neutral.100'),
            },
            '&::-webkit-scrollbar-thumb': {
              backgroundColor: theme('colors.primary-green'),
              borderRadius: '3px',
              '&:hover': {
                backgroundColor: theme('colors.primary-green'),
              },
            },
          },
          '.safe-area-top': {
            paddingTop: 'env(safe-area-inset-top)',
          },
          '.safe-area-bottom': {
            paddingBottom: 'env(safe-area-inset-bottom)',
          },
          '.safe-area-left': {
            paddingLeft: 'env(safe-area-inset-left)',
          },
          '.safe-area-right': {
            paddingRight: 'env(safe-area-inset-right)',
          },
        })
      }
    ],
    
    // 深色模式配置
    darkMode: ['class', '[data-theme="dark"]'],
    
    // 前缀
    prefix: '',
    
    // 重要性
    important: false,
    
    // 分隔符
    separator: ':',
    
    // 变体配置
    variants: {
      extend: {
        opacity: ['disabled'],
        cursor: ['disabled'],
        backgroundColor: ['active', 'disabled'],
        textColor: ['active', 'disabled'],
        borderColor: ['active', 'disabled'],
      },
    },
    
    // 核心插件配置
    corePlugins: {
      preflight: true,
      container: true,
    },
  }