debate-timer-fe/tailwind.config.js at develop · useon/debate-timer-fe · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      keyframes: {
        rotate: {
          '0%': { transform: 'rotate(0deg) scale(10)' },
          '100%': { transform: 'rotate(-360deg) scale(10)' },
        },
        gradient: {
          '0%, 100%': {
            'background-size': '300% 300%',
            'background-position': 'left center',
          },
          '33%': {
            'background-size': '300% 300%',
            'background-position': 'center center',
          },
          '66%': {
            'background-size': '300% 300%',
            'background-position': 'right center',
          },
        },
        colorTransition: {
          '0%, 100%': {
            backgroundColor: '#ffa2a2',
          },
          '50%': {
            backgroundColor: '#ff6467',
          },
        },
      },
      animation: {
        rotate: 'rotate 5s linear infinite',
        gradient: 'gradient 10s ease infinite',
        'color-transition': 'colorTransition 5s ease-in-out infinite',
      },
      fontFamily: {
        pretendard: [
          '"Pretendard Variable"',
          'Pretendard',
          '-apple-system',
          'BlinkMacSystemFont',
          'system-ui',
          'Roboto',
          '"Helvetica Neue"',
          '"Segoe UI"',
          '"Apple SD Gothic Neo"',
          '"Noto Sans KR"',
          '"Malgun Gothic"',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          'sans-serif',
        ],
      },
      boxShadow: {
        'camp-blue': `0 0 30px #FF3B2F`,
        'camp-red': `0 0 30px #007AFF`,
        'camp-neutral': `0 0 30px #737373`,
      },
      colors: {
        brand: {
          main: '#FECD4C',
          main501: '#FFF2B3',
          main502: '#FFD866',
          main504: '#E6B843',
          main505: '#C4A64C',

          sub1: '#FF5622',
          sub2: '#028391',
          sub3: '#FF8B87',
        },
        neutral: {
          1000: '#000000',
          0: '#FFFFFF',
        },
        system: {
          warning: '#FFBF40',
          success: '#4BD964',
          danger: '#FF3F2F',
          error: '#FF8B87',
        },
        camp: {
          red: '#F64740',
          blue: '#2B74E1',
        },
        background: {
          default: '#F6F5F4',
          secondary: '#FFF3DD',
          dark: '#E8E8E8',
        },
      },
    },
    screens: {
      md: '768px',
      lg: '1280px',
      xl: '1450px',
    },
  },
};