FE/tailwind.config.js at dev · Hana4Team/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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,ts,tsx}'],
  safelist: [
    'bg-[#28B2A5]',
    'bg-[#E90061]',
    'bg-[#FFC700]',
    'bg-[#AD9A5F]',
    'bg-[#B5B5B5]',
    'bg-[#9BDEDF]',
    'bg-[#5CB6B7]',
    'bg-[#FFB2B7]',
    'bg-[#F2777E]',
    'bg-[#9CDAB8]',
    'bg-[#74BE96]',
  ],
  theme: {
    fontFamily: {
      hanaHeavy: ['Hana-Heavy'],
      hanaBold: ['Hana-Bold'],
      hanaCM: ['Hana-CM'],
      hanaMedium: ['Hana-Medium'],
      hanaRegular: ['Hana-Regular'],
      hanaLight: ['Hana-Light'],
    },
    extend: {
      colors: {
        hanaGreen: '#28B2A5',
        hanaRed: '#E90061',
        hanaGray: '#F2F2F2',
        hanaLightGreen: '#9CDAB8',
        hanaDeepGreen: '#008485',
        hanaAqua: '#EAF3F2',
        hanaSky: '#F1FFFE',
        white: '#FFFFFF',
      },
      dropShadow: {
        '3xl': ['1px 0px 3px rgba(0, 0, 0, 0.2)'],
        under: ['4px 3px 3px rgba(0, 0, 0, 0.2)'],
      },
      keyframes: {
        'fade-in': {
          '0%': {
            opacity: 0,
          },
          '100%': {
            opacity: 1,
          },
        },
        'fade-in-bounceup': {
          '0%': {
            opacity: 0,
            transform: 'translate3d(0%, 100%, 0)',
          },
          '33%': {
            opacity: 0.5,
            transform: 'translate3d(0%, 0%, 0)',
          },
          '66%': {
            opacity: 0.7,
            transform: 'translate3d(0%, 20%, 0)',
          },
          '100%': {
            opacity: 1,
            transform: 'translate3d(0, 0, 0)',
          },
        },
        tada: {
          '0%': {
            transform: 'scale3d(1, 1, 1)',
          },
          '10%, 20%': {
            transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -6deg)',
          },
          '30%, 50%, 70%, 90%': {
            transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 6deg)',
          },
          '40%, 60%, 80%': {
            transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -6deg)',
          },
          '100%': {
            transform: 'scale3d(1, 1, 1)',
          },
        },
        'fly-in-up': {
          '0%': {
            opacity: '0',
            transform: 'translate3d(0, 50px, 0)',
            transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
          },
          '60%': {
            opacity: '1',
            transform: 'translate3d(0, -20px, 0)',
          },
          '75%': {
            transform: 'translate3d(0, 10px, 0)',
          },
          '90%': {
            transform: 'translate3d(0, -5px, 0)',
          },
          '100%': {
            transform: 'translate3d(0, 0, 0)',
          },
        },
        'zoom-in-down': {
          '0%': {
            opacity: 0,
            transform: 'scale3d(0.3, 0.3, 0.3) translate3d(0, -100%, 0)',
          },
          '80%': {
            opacity: 0.8,
            transform: 'scale3d(1.1, 1.1, 1.1)',
          },
          '100%': {
            opacity: 1,
            transform: 'translate3d(0, 0%, 0)',
          },
        },

        jiggle: {
          '0%': {
            transform: 'scale3d(1, 1, 1) rotate(-170deg)',
          },
          '30%': {
            transform: 'scale3d(1.25, 0.75, 1) rotate(-170deg)',
          },
          '40%': {
            transform: 'scale3d(0.75, 1.25, 1) rotate(-170deg)',
          },
          '50%': {
            transform: 'scale3d(1.15, 0.85, 1) rotate(-170deg)',
          },
          '65%': {
            transform: 'scale3d(0.95, 1.05, 1) rotate(-170deg)',
          },
          '75%': {
            transform: 'scale3d(1.05, 0.95, 1) rotate(-170deg)',
          },
          '100%': {
            transform: 'scale3d(1, 1, 1) rotate(-170deg)',
          },
        },
        'fade-in-right': {
          '0%': {
            opacity: 0,
            transform: 'translate3d(10%, 0, 0)',
          },
          '100%': {
            opacity: 1,
            transform: 'translate3d(0, 0, 0)',
          },
        },
        'fly-in': {
          '0%': {
            opacity: '0',
            transform: 'scale3d(0.3, 0.3, 0.3)',
            transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
          },
          '20%': {
            transform: 'scale3d(1.1, 1.1, 1.1)',
          },
          '40%': {
            transform: 'scale3d(0.9, 0.9, 0.9)',
          },
          '60%': {
            opacity: '1',
            transform: 'scale3d(1.03, 1.03, 1.03)',
          },
          '80%': {
            transform: 'scale3d(0.97, 0.97, 0.97)',
          },
          '100%': {
            opacity: '1',
            transform: 'scale3d(1, 1, 1)',
          },
        },
        'slide-down': {
          '0%': {
            transform: 'translate3d(0, 0, 0)',
          },
          '100%': {
            transform: 'translate3d(0, 60%, 0)',
          },
        },
        'slide-up': {
          '0%': {
            transform: 'translate3d(0, 0, 0)',
          },
          '100%': {
            transform: 'translate3d(0, -200%, 0)',
          },
        },
      },
      animation: {
        fadein1: 'fade-in 1.5s ease-in-out 0.5s 1',
        fadein2: 'fade-in 1.5s ease-in-out 1s 1',
        fadein3: 'fade-in 1.5s ease-in-out 1.5s 1',
        fadein4: 'fade-in 1.5s ease-in-out 2s 1',
        fadeinbounceup: 'fade-in-bounceup 1s ease-in-out 1s 1',
        tada: 'tada 1s ease-in-out 0.25s 1',
        flyinup: 'fly-in-up 0.6s ease-in-out 0.25s 1',
        zoomInDown: 'zoom-in-down 1s ease-out 0.25s 1',
        jiggle: 'jiggle 0.6s ease-in-out 0.25s 1',
        fadeinright: 'fade-in-right 1s ease-in-out 0.25s 1',
        flyin: 'fly-in 0.6s ease-in-out 0.25s 1',
        slidedown: 'slide-down 1s forwards',
        slideup: 'slide-up 1.3s forwards',
      },
    },
    minHeight: {
      'real-screen': 'calc(100vh - 100px)',
      'real-screen2': 'calc(100vh - 50px)',
      'real-screen3': 'calc(100vh - 150px)',
    },
    backgroundImage: {
      roadmap4: "url('/images/roadmap.svg')",
    },
  },
  plugins: [],
};