AutismGames/tailwind.config.js at main · trajanovd/AutismGames · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // Custom responsive breakpoints for autism games
      screens: {
        xs: '375px', // Small mobile
        sm: '640px', // Mobile
        md: '768px', // Tablet portrait
        lg: '1024px', // Tablet landscape
        xl: '1280px', // Desktop
        '2xl': '1536px', // Large desktop
        '3xl': '1920px', // Extra large desktop
      },
      // Custom colors from the PRD
      colors: {
        autism: {
          background: '#FAFAF5', // warm off-white, less sterile
          primary: '#8BC34A', // softer, modern blue (Tailwind blue-500)
          secondary: '#3B82F6', // fresh green with warmth
          success: '#4ADE80', // soft mint green (pleasant, calm)
          error: '#F87171', // coral red (gentler than orange)
          accent: '#FACC15', // cheerful golden yellow for highlights/rewards
          inactive: '#9CA3AF', // modern neutral gray
        },
      },
      // Custom spacing for accessibility
      spacing: {
        18: '4.5rem', // 72px - Large touch targets
        22: '5.5rem', // 88px - Extra large touch targets
        26: '6.5rem', // 104px - Very large touch targets
      },
      // Custom font sizes for accessibility
      fontSize: {
        xs: ['0.75rem', { lineHeight: '1rem' }],
        sm: ['0.875rem', { lineHeight: '1.25rem' }],
        base: ['1rem', { lineHeight: '1.5rem' }],
        lg: ['1.125rem', { lineHeight: '1.75rem' }],
        xl: ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
        '5xl': ['3rem', { lineHeight: '1' }],
        '6xl': ['3.75rem', { lineHeight: '1' }],
        '7xl': ['4.5rem', { lineHeight: '1' }],
        '8xl': ['6rem', { lineHeight: '1' }],
        '9xl': ['8rem', { lineHeight: '1' }],
      },
      // Custom animations for autism-friendly interactions
      animation: {
        'gentle-bounce': 'gentle-bounce 2s ease-in-out infinite',
        'soft-pulse': 'soft-pulse 3s ease-in-out infinite',
        breathing: 'breathing 4s ease-in-out infinite',
      },
      keyframes: {
        'gentle-bounce': {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-5px)' },
        },
        'soft-pulse': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.8' },
        },
        breathing: {
          '0%, 100%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.1)' },
        },
      },
    },
  },
  safelist: [
    'bg-blue-600',
    'bg-opacity-30',
    'text-white',
    'text-opacity-80',
    'border-blue-600',
    'bg-blue-600/30',
    'text-white/80',
  ],
  plugins: [],
};