Tolan/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    // 响应式断点
    screens: {
      'xs': '320px',   // 超小屏（旧手机）
      'sm': '640px',   // 小屏（手机横屏/小平板）
      'md': '768px',   // 中屏（平板竖屏）
      'lg': '1024px',  // 大屏（平板横屏/笔记本）
      'xl': '1280px',  // 超大屏（桌面）
      '2xl': '1536px', // 2K屏
    },
    extend: {
      // 自定义颜色
      colors: {
        'bg-main': '#E8E8E8',
        'bg-card': '#F5F3F0',
        'accent': '#007AFF',
      },
      // 自定义间距（支持视口单位）
      spacing: {
        '2vw': '2vw',
        '3vw': '3vw',
        '4vw': '4vw',
        '5vw': '5vw',
        '8vw': '8vw',
        '10vw': '10vw',
        '12vw': '12vw',
        '15vw': '15vw',
        '8vh': '8vh',
        '10vh': '10vh',
        '12vh': '12vh',
        '15vh': '15vh',
        '18vh': '18vh',
        '20vh': '20vh',
        '22vh': '22vh',
        '25vh': '25vh',
        '30vh': '30vh',
        '32vh': '32vh',
        '35vh': '35vh',
        '40vh': '40vh',
        '42vh': '42vh',
        '45vh': '45vh',
        '50vh': '50vh',
        '60vh': '60vh',
        '70vh': '70vh',
        '80vh': '80vh',
        '90vh': '90vh',
      },
      // 自定义字体大小（使用 min(vw, vh) 实现流式排版，确保字体不会因为单一维度变大而过大）
      fontSize: {
        'fluid-xs': 'clamp(8px, min(2.67vw, 1.23vh), 12px)',
        'fluid-sm': 'clamp(9.6px, min(3.2vw, 1.48vh), 14.4px)',
        'fluid-base': 'clamp(11.2px, min(3.73vw, 1.72vh), 16.8px)',
        'fluid-md': 'clamp(12.8px, min(4.27vw, 1.97vh), 19.2px)',
        'fluid-lg': 'clamp(14.4px, min(4.8vw, 2.22vh), 21.6px)',
        'fluid-xl': 'clamp(16px, min(5.33vw, 2.46vh), 24px)',
        'fluid-2xl': 'clamp(19.2px, min(6.4vw, 2.96vh), 28.8px)',
        'fluid-3xl': 'clamp(22.4px, min(7.47vw, 3.45vh), 33.6px)',
        'fluid-4xl': 'clamp(25.6px, min(8.53vw, 3.94vh), 38.4px)',
      },
      // 自定义最大宽度
      maxWidth: {
        'mobile': '450px',
        'tablet': '768px',
        'desktop': '1024px',
      },
      // 自定义宽度
      width: {
        'responsive-sm': 'clamp(44px, 12vw, 56px)',
        'responsive-md': 'clamp(64px, 16vw, 96px)',
        'responsive-lg': 'clamp(96px, 24vw, 140px)',
        'responsive-xl': 'clamp(140px, 32vw, 200px)',
      },
      // 自定义高度
      height: {
        'input': 'clamp(48px, 7vh, 56px)',
        'button': 'clamp(44px, 6vh, 52px)',
        'button-sm': 'clamp(36px, 5vh, 44px)',
        'responsive-sm': 'clamp(44px, 12vw, 56px)',
        'responsive-md': 'clamp(64px, 16vw, 96px)',
        'responsive-lg': 'clamp(96px, 24vw, 140px)',
        'responsive-xl': 'clamp(140px, 32vw, 200px)',
      },
      // 自定义圆角
      borderRadius: {
        'xl-top': '12px 12px 0 0',
        'xl-bottom': '0 0 12px 12px',
      },
      // 自定义动画
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-up': 'slideUp 0.4s ease-out',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'float': 'float 3s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
        },
      },
    },
  },
  plugins: [],
}