@edu-tosel/design 1.0.156 → 1.0.157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,675 +1,675 @@
1
- import tailwindcssAnimate from "tailwindcss-animate";
2
- import type { Config } from "tailwindcss";
3
- import type { PluginAPI } from "tailwindcss/types/config";
4
-
5
- // import twElements from "tw-elements/dist/plugin";
6
- // import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
7
-
8
- export default {
9
- content: [
10
- // "./node_modules/tw-elements/dist/js/**/*.js",
11
- "./index.html",
12
- "./src/**/*.{js,jsx,ts,tsx}",
13
- ],
14
- theme: {
15
- extend: {
16
- fontFamily: {
17
- "pretendard-medium": ["pretendard-medium"],
18
- "pretendard-bold": ["pretendard-bold"],
19
- "pretendard-light": ["pretendard-light"],
20
- "pretendard-var": ["PretendardVariable"],
21
- kostar: ["kostar"],
22
- nicomoji: ["nicomoji"],
23
- megrim: ["megrim"],
24
- "times-newer-roman-bold": ["times-newer-roman-bold"],
25
- "times-newer-roman-bolditalic": ["times-newer-roman-bolditalic"],
26
- },
27
- backgroundImage: {
28
- "image-space": "url('/images/space/space.png')",
29
- },
30
- scrollbar: {
31
- hidden: "hidden",
32
- },
33
- boxShadow: {
34
- main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
35
- "main-small": "0 0px 5px 0px rgba(0, 0, 0, 0.1)",
36
- "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
37
- green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
38
- },
39
- keyframes: {
40
- grow: {
41
- "0%": { height: "60px" },
42
- "100%": { height: "120px" },
43
- },
44
- shrink: {
45
- "0%": { height: "120px" },
46
- "100%": { height: "60px" },
47
- },
48
-
49
- slideBackground: {
50
- "0%, 100%": { backgroundPosition: "left center" },
51
- "50%": { backgroundPosition: "right center" },
52
- },
53
- fadeIn: {
54
- from: { opacity: "0" },
55
- to: { opacity: "1" },
56
- },
57
- fadeOut: {
58
- from: { opacity: "1" },
59
- to: { opacity: "0" },
60
- },
61
- increaseWidth: {
62
- from: { width: "0%" },
63
- to: { width: "33.3%" },
64
- },
65
- decreaseWidth: {
66
- from: { width: "33.3%" },
67
- to: { width: "0%" },
68
- },
69
- },
70
-
71
- animation: {
72
- grow: "grow 0.2s ease-in-out forwards",
73
- shrink: "shrink 0.2s ease-in-out forwards",
74
- },
75
-
76
- colors: {
77
- "white-off": "#F5F5F5",
78
- "red-burgundy": "#933652",
79
- "crimson-burgundy": "#910023",
80
- "crimson-burgundy-light": "#EDDFE2",
81
- "crimson-dark": "#760023",
82
- "red-crimson": "#760023",
83
- "red-velvet": "#AC647A",
84
- "green-dark": "#105652",
85
- "green-light": "#DFE5E4",
86
- "blue-sky": "#44C5F3",
87
- "blue-navy": "#173A8B",
88
- "blue-navy-light": "#E1E4EB",
89
- "blue-pastel": "#CED6E6",
90
- "violet-light": "#9979F6",
91
- "gray-light": "#F0F0F0",
92
- "gray-light-super": "#D9D9D9",
93
- "gray-medium": "#7F7F7F",
94
- "gray-dim": "#4C4C4C",
95
- "gray-dark": "#4C4C4C",
96
- "silver-lavender": "#E7E9F2",
97
- "silver-latte": "#FBF3E4",
98
- "silver-pale": "#DFD8CA",
99
-
100
- // Brand Colors
101
- "cocoon-green": "#00E35B",
102
- "ps-pink": "#E3006E",
103
- "ps-pink-light": "#FFBADB",
104
- "st-orange": "#ED6A00",
105
- "st-orange-light": "#F5D2B6",
106
- "ba-yellow": "#FCCE30",
107
- "ba-yellow-light": "#FFEFB7",
108
- "jr-blue": "#52A2DA",
109
- "jr-blue-light": "#D6EEFF",
110
- "hj-blue": "#385EAB",
111
- "hj-blue-light": "#A8BFE5",
112
- // Gradation Colors
113
- },
114
- maxHeight: {
115
- 44: "11rem",
116
- "9/10": "90%",
117
- },
118
- maxWidth: {
119
- 256: "64rem",
120
- 262: "65.5rem",
121
- 290: "72.5rem",
122
- },
123
- spacing: {
124
- "sun-calc": "calc(50% - 6rem)",
125
- 0.5: "0.125rem",
126
- 1: "0.25rem",
127
- 1.25: "0.3125rem",
128
- 1.5: "0.375rem",
129
- 2.125: "0.53125rem",
130
- 2.25: "0.5625rem",
131
- 2.5: "0.625rem",
132
- 2.625: "0.65625rem",
133
- 2.75: "0.6875rem",
134
- 3.5: "0.875rem",
135
- 3.75: "0.9375rem",
136
- 4.25: "1.0625rem",
137
- 4.375: "1.09375rem",
138
- 4.5: "1.125rem",
139
- 4.75: "1.1875rem",
140
- 5.25: "1.3125rem",
141
- 5.5: "1.375rem",
142
- 5.75: "1.4375rem",
143
- 6.25: "1.5625rem",
144
- 6.4: "1.6rem",
145
- 6.5: "1.625rem",
146
- 6.75: "1.6875rem",
147
- 7: "1.75rem",
148
- 7.5: "1.875rem",
149
- 8: "2rem",
150
- 8.5: "2.125rem",
151
- 9: "2.25rem",
152
- 9.25: "2.3125rem",
153
- 9.5: "2.375rem",
154
- 10: "2.5rem",
155
- 10.25: "2.5625rem",
156
- 10.5: "2.625rem",
157
- 11: "2.75rem",
158
- 11.25: "2.8125rem",
159
- 11.375: "2.84375rem",
160
- 11.5: "2.875rem",
161
- 12: "3rem",
162
- 12.25: "3.0625rem",
163
- 12.5: "3.125rem",
164
- 13: "3.25rem",
165
- 13.25: "3.3125rem",
166
- 13.5: "3.375rem",
167
- 13.75: "3.4375rem",
168
- 14: "3.5rem",
169
- 14.125: "3.53125rem",
170
- 14.25: "3.5625rem",
171
- 14.5: "3.625rem",
172
- 15: "3.75rem",
173
- 15.5: "3.875rem",
174
- 16: "4rem",
175
- 17: "4.25rem",
176
- 17.75: "4.4375rem",
177
- 18: "4.5rem",
178
- 18.5: "4.625rem",
179
- 18.75: "4.6875rem",
180
- 19: "4.75rem",
181
- 19.25: "4.8125rem",
182
- 19.5: "4.875rem",
183
- 20: "5rem",
184
- 20.5: "5.125rem",
185
- 20.75: "5.1875rem",
186
- 21: "5.25rem",
187
- 21.5: "5.375rem",
188
- 21.75: "5.4375rem",
189
- 22: "5.5rem",
190
- 22.5: "5.625rem",
191
- 23: "5.75rem",
192
- 23.25: "5.8125rem",
193
- 23.5: "5.875rem",
194
- 23.75: "5.9375rem",
195
- 25: "6.25rem",
196
- 25.75: "6.4375rem",
197
- 26: "6.5rem",
198
- 27: "6.75rem",
199
- 27.5: "6.875rem",
200
- 28.78: "7.195rem",
201
- 29: "7.25rem",
202
- 30: "7.5rem",
203
- 32.5: "8.125rem",
204
- 34: "8.5rem",
205
- 36: "9rem",
206
- 36.5: "9.125rem",
207
- 36.75: "9.1875rem",
208
- 38: "9.5rem",
209
- 39.5: "9.875rem",
210
- 40: "10rem",
211
- 41: "10.25rem",
212
- 42: "10.5rem",
213
- 43: "10.75rem",
214
- 44: "11rem",
215
- 45: "11.25rem",
216
- 46: "11.5rem",
217
- 46.5: "11.625rem",
218
- 47.5: "11.875rem",
219
- 48: "12rem",
220
- 49: "12.25rem",
221
- 50: "12.5rem",
222
- 51: "12.75rem",
223
- 52: "13rem",
224
- 52.5: "13.125rem",
225
- 53.75: "13.4375rem",
226
- 54: "13.5rem",
227
- 55: "13.75rem",
228
- 56: "14rem",
229
- 57.5: "14.375rem",
230
- 62: "15.5rem",
231
- 64: "16rem",
232
- 65: "16.25rem",
233
- 67.5: "16.875rem",
234
- 68: "17rem",
235
- 69: "17.25rem",
236
- 70: "17.5rem",
237
- 72: "18rem",
238
- 73: "18.25rem",
239
- 75: "18.75rem",
240
- 76: "19rem",
241
- 78: "20rem",
242
- 81: "20.25rem",
243
- 82: "20.5rem",
244
- 84: "21rem",
245
- 85: "21.25rem",
246
- 88: "22rem",
247
- 88.5: "22.125rem",
248
- 90: "22.5rem",
249
- 92: "23rem",
250
- 93: "23.25rem",
251
- 93.25: "23.3125rem",
252
- 95: "23.75rem",
253
- 96: "24rem",
254
- 98: "24.5rem",
255
- 100: "25rem",
256
- 102.5: "25.625rem",
257
- 104: "26rem",
258
- 104.5: "26.125rem",
259
- 106: "26.5rem",
260
- 108: "27rem",
261
- 110: "27.5rem",
262
- 112: "28rem",
263
- 112.5: "28.125rem",
264
- 114: "28.5rem",
265
- 116: "29rem",
266
- 120: "30rem",
267
- 122: "30.5rem",
268
- 124: "31rem",
269
- 125: "31.25rem",
270
- 125.5: "31.375rem",
271
- 126: "31.5rem",
272
- 127.5: "31.875rem",
273
- 128: "32rem",
274
- 132: "33rem",
275
- 135: "33.75rem",
276
- 136: "34rem",
277
- 138.5: "34.625rem",
278
- 138.75: "34.6875rem",
279
- 140: "35rem",
280
- 144: "36rem",
281
- 145: "36.25rem",
282
- 145.25: "36.375rem",
283
- 146: "36.5rem",
284
- 147: "36.75rem",
285
- 148: "37rem",
286
- 150: "37.5rem",
287
- 151.5: "37.875rem",
288
- 151.75: "37.9375rem",
289
- 152: "38rem",
290
- 153: "38.25rem",
291
- 154: "38.5rem",
292
- 155: "38.75rem",
293
- 156: "39rem",
294
- 157: "39.25rem",
295
- 158: "39.5rem",
296
- 159: "39.75rem",
297
- 160: "40rem",
298
- 164: "41rem",
299
- 168: "42rem",
300
- 171.5: "42.875rem",
301
- 172: "43rem",
302
- 176: "44rem",
303
- 178: "44.5rem",
304
- 180: "45rem",
305
- 182: "45.5rem",
306
- 184: "46rem",
307
- 186: "46.5rem",
308
- 187.5: "46.875rem",
309
- 188: "47rem",
310
- 190: "47.5rem",
311
- 192: "48rem",
312
- 200: "50rem",
313
- 216: "54rem",
314
- 220: "55rem",
315
- 224: "56rem",
316
- 225: "56.25rem",
317
- 228: "57rem",
318
- 232: "58rem",
319
- 240: "60rem",
320
- 247.5: "61.875rem",
321
- 248: "62rem",
322
- 255: "63.75rem",
323
- 256: "64rem",
324
- 260: "65rem",
325
- 264: "66rem",
326
- 272: "68rem",
327
- 280: "70rem",
328
- 288: "72rem",
329
- 300: "75rem",
330
- 312: "78rem",
331
- 320: "80rem",
332
- 360: "90rem",
333
- 386: "96.5rem",
334
- 408: "102rem",
335
- 480: "120rem",
336
- 500: "125rem",
337
- 520: "140rem",
338
- },
339
- backgroundSize: {
340
- auto: "auto",
341
- cover: "cover",
342
- contain: "contain",
343
- 16: "4rem",
344
- 64: "16rem",
345
- 80: "20rem",
346
- 88: "22rem",
347
- 92: "23rem",
348
- 96: "24rem",
349
- 100: "25rem",
350
- 128: "32rem",
351
- },
352
- borderRadius: {
353
- lgx: "0.625rem",
354
- },
355
- transitionDelay: {
356
- 450: "450ms",
357
- 600: "600ms",
358
- 750: "750ms",
359
- 800: "800ms",
360
- 900: "900ms",
361
- 1000: "1000ms",
362
- 1050: "1050ms",
363
- 1100: "1100ms",
364
- 1150: "1150ms",
365
- 1200: "1200ms",
366
- 1250: "1250ms",
367
- 1300: "1300ms",
368
- 1350: "1350ms",
369
- 1400: "1400ms",
370
- 1500: "1500ms",
371
- 1600: "1600ms",
372
- 1650: "1650ms",
373
- 1700: "1700ms",
374
- 1750: "1750ms",
375
- 1800: "1800ms",
376
- 1950: "1950ms",
377
- 2000: "2000ms",
378
- 2100: "2100ms",
379
- 2200: "2200ms",
380
- 2250: "2250ms",
381
- 2400: "2400ms",
382
- 2500: "2500ms",
383
- 2550: "2550ms",
384
- 2600: "2600ms",
385
- 2700: "2700ms",
386
- 2800: "2800ms",
387
- 3000: "3000ms",
388
- 3300: "3300ms",
389
- 3900: "3900ms",
390
- 4000: "4000ms",
391
- 5000: "5000ms",
392
- },
393
- transitionDuration: {
394
- 300: "300ms",
395
- 1000: "1000ms",
396
- 2000: "2000ms",
397
- 5000: "5000ms",
398
- 60000: "60000ms",
399
- 300000: "300000ms",
400
- },
401
- borderWidth: {
402
- 1: "1px",
403
- 2: "2px",
404
- 3: "3px",
405
- 4: "4px",
406
- 5: "5px",
407
- 6: "6px",
408
- 7: "7px",
409
- 8: "8px",
410
- },
411
- opacity: {
412
- 32: ".32",
413
- },
414
- scale: {
415
- 101: "1.01",
416
- 110: "1.1",
417
- 120: "1.2",
418
- 200: "2",
419
- },
420
- skew: {
421
- 20: "20deg",
422
- 30: "30deg",
423
- 39: "39deg",
424
- 45: "45deg",
425
- 60: "60deg",
426
- },
427
- brightness: {
428
- 10: ".1",
429
- 20: ".2",
430
- 30: ".3",
431
- 40: ".4",
432
- },
433
- fontSize: {
434
- "2xs": "0.625rem",
435
- xs: "0.75rem",
436
- sm: "0.875rem",
437
- base: "1rem",
438
- lg: "1.125rem",
439
- xl: "1.25rem",
440
- "2xl": "1.5rem",
441
- "3xl": "1.875rem",
442
- "4xl": "2.25rem",
443
- "5xl": "3rem",
444
- "6xl": "3.75rem",
445
- "7xl": "4.5rem",
446
- "8xl": "6rem",
447
- "9xl": "8rem",
448
- "10xl": "10rem",
449
- "11xl": "12rem",
450
- },
451
- screens: {
452
- xxxs: "332px",
453
- xxs: "393px",
454
- xs: "480px",
455
- sm: "640px",
456
- md: "768px", // IPad Mini
457
- mmd: "840px",
458
- xm: "964px", // IPad Air, IPad Pro 11.
459
- lg: "1024px", // IPad Mini Horizontal Viewport
460
- ml: "1160px", // IPad Air, IPad Pro 11.
461
- xl: "1280px",
462
- "2xl": "1536px",
463
- },
464
- inset: {
465
- "1/20": "5%",
466
- "1/10": "10%",
467
- "2/10": "5%",
468
- "1/5": "20%",
469
- "2/5": "40%",
470
- "4/5": "80%",
471
- "1/4": "25%",
472
- "1/3": "33.3333333%",
473
- "5/100": "5%",
474
- "10/100": "10%",
475
- "15/100": "15%",
476
- "36/100": "36%",
477
- "43/100": "43%",
478
- "46/100": "46%",
479
- },
480
- width: {
481
- 90: "22.5rem",
482
- 120: "30rem",
483
- 176: "44rem",
484
- "2/3": "66.6666667%",
485
- "1/7": "14.2857143%",
486
- "2/7": "28.5714286%",
487
- "3/7": "42.8571429%",
488
- "4/7": "57.1428571%",
489
- "1/8": "12.5%",
490
- "3/10": "30%",
491
- "1/10": "10%",
492
- "4/10": "40%",
493
- "6/10": "60%",
494
- "7/10": "70%",
495
- "9/10": "90%",
496
- // percentile width
497
- "1/100": "1%",
498
- "2/100": "2%",
499
- "3/100": "3%",
500
- "4/100": "4%",
501
- "5/100": "5%",
502
- "6/100": "6%",
503
- "7/100": "7%",
504
- "8/100": "8%",
505
- "9/100": "9%",
506
- "10/100": "10%",
507
- "11/100": "11%",
508
- "12/100": "12%",
509
- "13/100": "13%",
510
- "14/100": "14%",
511
- "15/100": "15%",
512
- "16/100": "16%",
513
- "17/100": "17%",
514
- "18/100": "18%",
515
- "19/100": "19%",
516
- "20/100": "20%",
517
- "21/100": "21%",
518
- "22/100": "22%",
519
- "23/100": "23%",
520
- "24/100": "24%",
521
- "25/100": "25%",
522
- "26/100": "26%",
523
- "27/100": "27%",
524
- "28/100": "28%",
525
- "29/100": "29%",
526
- "30/100": "30%",
527
- "31/100": "31%",
528
- "32/100": "32%",
529
- "33/100": "33%",
530
- "34/100": "34%",
531
- "35/100": "35%",
532
- "36/100": "36%",
533
- "37/100": "37%",
534
- "38/100": "38%",
535
- "39/100": "39%",
536
- "40/100": "40%",
537
- "41/100": "41%",
538
- "42/100": "42%",
539
- "43/100": "43%",
540
- "44/100": "44%",
541
- "45/100": "45%",
542
- "46/100": "46%",
543
- "47/100": "47%",
544
- "48/100": "48%",
545
- "49/100": "49%",
546
- "50/100": "50%",
547
- "51/100": "51%",
548
- "52/100": "52%",
549
- "53/100": "53%",
550
- "54/100": "54%",
551
- "55/100": "55%",
552
- "56/100": "56%",
553
- "57/100": "57%",
554
- "58/100": "58%",
555
- "59/100": "59%",
556
- "60/100": "60%",
557
- "61/100": "61%",
558
- "62/100": "62%",
559
- "63/100": "63%",
560
- "64/100": "64%",
561
- "65/100": "65%",
562
- "66/100": "66%",
563
- "67/100": "67%",
564
- "68/100": "68%",
565
- "69/100": "69%",
566
- "70/100": "70%",
567
- "71/100": "71%",
568
- "72/100": "72%",
569
- "73/100": "73%",
570
- "74/100": "74%",
571
- "75/100": "75%",
572
- "76/100": "76%",
573
- "77/100": "77%",
574
- "78/100": "78%",
575
- "79/100": "79%",
576
- "80/100": "80%",
577
- "81/100": "81%",
578
- "82/100": "82%",
579
- "83/100": "83%",
580
- "84/100": "84%",
581
- "85/100": "85%",
582
- "86/100": "86%",
583
- "87/100": "87%",
584
- "88/100": "88%",
585
- "89/100": "89%",
586
- "90/100": "90%",
587
- "91/100": "91%",
588
- "92/100": "92%",
589
- "93/100": "93%",
590
- "94/100": "94%",
591
- "95/100": "95%",
592
- "96/100": "96%",
593
- "97/100": "97%",
594
- "98/100": "98%",
595
- "99/100": "99%",
596
- "100/100": "100%",
597
- },
598
- height: {
599
- "2/3": "66.6666667%",
600
- "4/7": "57.1428571%",
601
- "3/7": "42.8571429%",
602
- "5/12": "41.6666667%",
603
- "1/10": "10%",
604
- "3/10": "30%",
605
- "4/10": "40%",
606
- "6/10": "60%",
607
- "7/10": "70%",
608
- "9/10": "90%",
609
- },
610
- zIndex: {
611
- "100": "100",
612
- "90": "90",
613
- "50": "50",
614
- "49": "49",
615
- "48": "48",
616
- "47": "47",
617
- "46": "46",
618
- "45": "45",
619
- "44": "44",
620
- "43": "43",
621
- "42": "42",
622
- "41": "41",
623
- "40": "40",
624
- "30": "30",
625
- "20": "20",
626
- "10": "10",
627
- "0": "0",
628
- },
629
- },
630
- },
631
- safelist: [
632
- {
633
- pattern: /top-.*/,
634
- },
635
- {
636
- pattern: /-top-.*/,
637
- },
638
- {
639
- pattern: /bottom*.*/,
640
- },
641
- {
642
- pattern: /left-.*/,
643
- },
644
- {
645
- pattern: /-left-.*/,
646
- },
647
- {
648
- pattern: /right*.*/,
649
- },
650
- {
651
- pattern: /delay-.*/,
652
- },
653
- ],
654
- plugins: [
655
- tailwindcssAnimate,
656
- function ({ addUtilities }: PluginAPI) {
657
- addUtilities(
658
- {
659
- ".scrollbar-hidden::-webkit-scrollbar": {
660
- display: "none", // For WebKit browsers
661
- },
662
- ".scrollbar-hidden": {
663
- "-ms-overflow-style": "none", // For Internet Explorer and Edge
664
- "scrollbar-width": "none", // For Firefox
665
- },
666
- },
667
- {
668
- respectPrefix: false,
669
- respectImportant: false,
670
- }
671
- );
672
- },
673
- ],
674
- darkMode: "selector",
675
- } satisfies Config;
1
+ import tailwindcssAnimate from "tailwindcss-animate";
2
+ import type { Config } from "tailwindcss";
3
+ import type { PluginAPI } from "tailwindcss/types/config";
4
+
5
+ // import twElements from "tw-elements/dist/plugin";
6
+ // import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
7
+
8
+ export default {
9
+ content: [
10
+ // "./node_modules/tw-elements/dist/js/**/*.js",
11
+ "./index.html",
12
+ "./src/**/*.{js,jsx,ts,tsx}",
13
+ ],
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ "pretendard-medium": ["pretendard-medium"],
18
+ "pretendard-bold": ["pretendard-bold"],
19
+ "pretendard-light": ["pretendard-light"],
20
+ "pretendard-var": ["PretendardVariable"],
21
+ kostar: ["kostar"],
22
+ nicomoji: ["nicomoji"],
23
+ megrim: ["megrim"],
24
+ "times-newer-roman-bold": ["times-newer-roman-bold"],
25
+ "times-newer-roman-bolditalic": ["times-newer-roman-bolditalic"],
26
+ },
27
+ backgroundImage: {
28
+ "image-space": "url('/images/space/space.png')",
29
+ },
30
+ scrollbar: {
31
+ hidden: "hidden",
32
+ },
33
+ boxShadow: {
34
+ main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
35
+ "main-small": "0 0px 5px 0px rgba(0, 0, 0, 0.1)",
36
+ "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
37
+ green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
38
+ },
39
+ keyframes: {
40
+ grow: {
41
+ "0%": { height: "60px" },
42
+ "100%": { height: "120px" },
43
+ },
44
+ shrink: {
45
+ "0%": { height: "120px" },
46
+ "100%": { height: "60px" },
47
+ },
48
+
49
+ slideBackground: {
50
+ "0%, 100%": { backgroundPosition: "left center" },
51
+ "50%": { backgroundPosition: "right center" },
52
+ },
53
+ fadeIn: {
54
+ from: { opacity: "0" },
55
+ to: { opacity: "1" },
56
+ },
57
+ fadeOut: {
58
+ from: { opacity: "1" },
59
+ to: { opacity: "0" },
60
+ },
61
+ increaseWidth: {
62
+ from: { width: "0%" },
63
+ to: { width: "33.3%" },
64
+ },
65
+ decreaseWidth: {
66
+ from: { width: "33.3%" },
67
+ to: { width: "0%" },
68
+ },
69
+ },
70
+
71
+ animation: {
72
+ grow: "grow 0.2s ease-in-out forwards",
73
+ shrink: "shrink 0.2s ease-in-out forwards",
74
+ },
75
+
76
+ colors: {
77
+ "white-off": "#F5F5F5",
78
+ "red-burgundy": "#933652",
79
+ "crimson-burgundy": "#910023",
80
+ "crimson-burgundy-light": "#EDDFE2",
81
+ "crimson-dark": "#760023",
82
+ "red-crimson": "#760023",
83
+ "red-velvet": "#AC647A",
84
+ "green-dark": "#105652",
85
+ "green-light": "#DFE5E4",
86
+ "blue-sky": "#44C5F3",
87
+ "blue-navy": "#173A8B",
88
+ "blue-navy-light": "#E1E4EB",
89
+ "blue-pastel": "#CED6E6",
90
+ "violet-light": "#9979F6",
91
+ "gray-light": "#F0F0F0",
92
+ "gray-light-super": "#D9D9D9",
93
+ "gray-medium": "#7F7F7F",
94
+ "gray-dim": "#4C4C4C",
95
+ "gray-dark": "#4C4C4C",
96
+ "silver-lavender": "#E7E9F2",
97
+ "silver-latte": "#FBF3E4",
98
+ "silver-pale": "#DFD8CA",
99
+
100
+ // Brand Colors
101
+ "cocoon-green": "#00E35B",
102
+ "ps-pink": "#E3006E",
103
+ "ps-pink-light": "#FFBADB",
104
+ "st-orange": "#ED6A00",
105
+ "st-orange-light": "#F5D2B6",
106
+ "ba-yellow": "#FCCE30",
107
+ "ba-yellow-light": "#FFEFB7",
108
+ "jr-blue": "#52A2DA",
109
+ "jr-blue-light": "#D6EEFF",
110
+ "hj-blue": "#385EAB",
111
+ "hj-blue-light": "#A8BFE5",
112
+ // Gradation Colors
113
+ },
114
+ maxHeight: {
115
+ 44: "11rem",
116
+ "9/10": "90%",
117
+ },
118
+ maxWidth: {
119
+ 256: "64rem",
120
+ 262: "65.5rem",
121
+ 290: "72.5rem",
122
+ },
123
+ spacing: {
124
+ "sun-calc": "calc(50% - 6rem)",
125
+ 0.5: "0.125rem",
126
+ 1: "0.25rem",
127
+ 1.25: "0.3125rem",
128
+ 1.5: "0.375rem",
129
+ 2.125: "0.53125rem",
130
+ 2.25: "0.5625rem",
131
+ 2.5: "0.625rem",
132
+ 2.625: "0.65625rem",
133
+ 2.75: "0.6875rem",
134
+ 3.5: "0.875rem",
135
+ 3.75: "0.9375rem",
136
+ 4.25: "1.0625rem",
137
+ 4.375: "1.09375rem",
138
+ 4.5: "1.125rem",
139
+ 4.75: "1.1875rem",
140
+ 5.25: "1.3125rem",
141
+ 5.5: "1.375rem",
142
+ 5.75: "1.4375rem",
143
+ 6.25: "1.5625rem",
144
+ 6.4: "1.6rem",
145
+ 6.5: "1.625rem",
146
+ 6.75: "1.6875rem",
147
+ 7: "1.75rem",
148
+ 7.5: "1.875rem",
149
+ 8: "2rem",
150
+ 8.5: "2.125rem",
151
+ 9: "2.25rem",
152
+ 9.25: "2.3125rem",
153
+ 9.5: "2.375rem",
154
+ 10: "2.5rem",
155
+ 10.25: "2.5625rem",
156
+ 10.5: "2.625rem",
157
+ 11: "2.75rem",
158
+ 11.25: "2.8125rem",
159
+ 11.375: "2.84375rem",
160
+ 11.5: "2.875rem",
161
+ 12: "3rem",
162
+ 12.25: "3.0625rem",
163
+ 12.5: "3.125rem",
164
+ 13: "3.25rem",
165
+ 13.25: "3.3125rem",
166
+ 13.5: "3.375rem",
167
+ 13.75: "3.4375rem",
168
+ 14: "3.5rem",
169
+ 14.125: "3.53125rem",
170
+ 14.25: "3.5625rem",
171
+ 14.5: "3.625rem",
172
+ 15: "3.75rem",
173
+ 15.5: "3.875rem",
174
+ 16: "4rem",
175
+ 17: "4.25rem",
176
+ 17.75: "4.4375rem",
177
+ 18: "4.5rem",
178
+ 18.5: "4.625rem",
179
+ 18.75: "4.6875rem",
180
+ 19: "4.75rem",
181
+ 19.25: "4.8125rem",
182
+ 19.5: "4.875rem",
183
+ 20: "5rem",
184
+ 20.5: "5.125rem",
185
+ 20.75: "5.1875rem",
186
+ 21: "5.25rem",
187
+ 21.5: "5.375rem",
188
+ 21.75: "5.4375rem",
189
+ 22: "5.5rem",
190
+ 22.5: "5.625rem",
191
+ 23: "5.75rem",
192
+ 23.25: "5.8125rem",
193
+ 23.5: "5.875rem",
194
+ 23.75: "5.9375rem",
195
+ 25: "6.25rem",
196
+ 25.75: "6.4375rem",
197
+ 26: "6.5rem",
198
+ 27: "6.75rem",
199
+ 27.5: "6.875rem",
200
+ 28.78: "7.195rem",
201
+ 29: "7.25rem",
202
+ 30: "7.5rem",
203
+ 32.5: "8.125rem",
204
+ 34: "8.5rem",
205
+ 36: "9rem",
206
+ 36.5: "9.125rem",
207
+ 36.75: "9.1875rem",
208
+ 38: "9.5rem",
209
+ 39.5: "9.875rem",
210
+ 40: "10rem",
211
+ 41: "10.25rem",
212
+ 42: "10.5rem",
213
+ 43: "10.75rem",
214
+ 44: "11rem",
215
+ 45: "11.25rem",
216
+ 46: "11.5rem",
217
+ 46.5: "11.625rem",
218
+ 47.5: "11.875rem",
219
+ 48: "12rem",
220
+ 49: "12.25rem",
221
+ 50: "12.5rem",
222
+ 51: "12.75rem",
223
+ 52: "13rem",
224
+ 52.5: "13.125rem",
225
+ 53.75: "13.4375rem",
226
+ 54: "13.5rem",
227
+ 55: "13.75rem",
228
+ 56: "14rem",
229
+ 57.5: "14.375rem",
230
+ 62: "15.5rem",
231
+ 64: "16rem",
232
+ 65: "16.25rem",
233
+ 67.5: "16.875rem",
234
+ 68: "17rem",
235
+ 69: "17.25rem",
236
+ 70: "17.5rem",
237
+ 72: "18rem",
238
+ 73: "18.25rem",
239
+ 75: "18.75rem",
240
+ 76: "19rem",
241
+ 78: "20rem",
242
+ 81: "20.25rem",
243
+ 82: "20.5rem",
244
+ 84: "21rem",
245
+ 85: "21.25rem",
246
+ 88: "22rem",
247
+ 88.5: "22.125rem",
248
+ 90: "22.5rem",
249
+ 92: "23rem",
250
+ 93: "23.25rem",
251
+ 93.25: "23.3125rem",
252
+ 95: "23.75rem",
253
+ 96: "24rem",
254
+ 98: "24.5rem",
255
+ 100: "25rem",
256
+ 102.5: "25.625rem",
257
+ 104: "26rem",
258
+ 104.5: "26.125rem",
259
+ 106: "26.5rem",
260
+ 108: "27rem",
261
+ 110: "27.5rem",
262
+ 112: "28rem",
263
+ 112.5: "28.125rem",
264
+ 114: "28.5rem",
265
+ 116: "29rem",
266
+ 120: "30rem",
267
+ 122: "30.5rem",
268
+ 124: "31rem",
269
+ 125: "31.25rem",
270
+ 125.5: "31.375rem",
271
+ 126: "31.5rem",
272
+ 127.5: "31.875rem",
273
+ 128: "32rem",
274
+ 132: "33rem",
275
+ 135: "33.75rem",
276
+ 136: "34rem",
277
+ 138.5: "34.625rem",
278
+ 138.75: "34.6875rem",
279
+ 140: "35rem",
280
+ 144: "36rem",
281
+ 145: "36.25rem",
282
+ 145.25: "36.375rem",
283
+ 146: "36.5rem",
284
+ 147: "36.75rem",
285
+ 148: "37rem",
286
+ 150: "37.5rem",
287
+ 151.5: "37.875rem",
288
+ 151.75: "37.9375rem",
289
+ 152: "38rem",
290
+ 153: "38.25rem",
291
+ 154: "38.5rem",
292
+ 155: "38.75rem",
293
+ 156: "39rem",
294
+ 157: "39.25rem",
295
+ 158: "39.5rem",
296
+ 159: "39.75rem",
297
+ 160: "40rem",
298
+ 164: "41rem",
299
+ 168: "42rem",
300
+ 171.5: "42.875rem",
301
+ 172: "43rem",
302
+ 176: "44rem",
303
+ 178: "44.5rem",
304
+ 180: "45rem",
305
+ 182: "45.5rem",
306
+ 184: "46rem",
307
+ 186: "46.5rem",
308
+ 187.5: "46.875rem",
309
+ 188: "47rem",
310
+ 190: "47.5rem",
311
+ 192: "48rem",
312
+ 200: "50rem",
313
+ 216: "54rem",
314
+ 220: "55rem",
315
+ 224: "56rem",
316
+ 225: "56.25rem",
317
+ 228: "57rem",
318
+ 232: "58rem",
319
+ 240: "60rem",
320
+ 247.5: "61.875rem",
321
+ 248: "62rem",
322
+ 255: "63.75rem",
323
+ 256: "64rem",
324
+ 260: "65rem",
325
+ 264: "66rem",
326
+ 272: "68rem",
327
+ 280: "70rem",
328
+ 288: "72rem",
329
+ 300: "75rem",
330
+ 312: "78rem",
331
+ 320: "80rem",
332
+ 360: "90rem",
333
+ 386: "96.5rem",
334
+ 408: "102rem",
335
+ 480: "120rem",
336
+ 500: "125rem",
337
+ 520: "140rem",
338
+ },
339
+ backgroundSize: {
340
+ auto: "auto",
341
+ cover: "cover",
342
+ contain: "contain",
343
+ 16: "4rem",
344
+ 64: "16rem",
345
+ 80: "20rem",
346
+ 88: "22rem",
347
+ 92: "23rem",
348
+ 96: "24rem",
349
+ 100: "25rem",
350
+ 128: "32rem",
351
+ },
352
+ borderRadius: {
353
+ lgx: "0.625rem",
354
+ },
355
+ transitionDelay: {
356
+ 450: "450ms",
357
+ 600: "600ms",
358
+ 750: "750ms",
359
+ 800: "800ms",
360
+ 900: "900ms",
361
+ 1000: "1000ms",
362
+ 1050: "1050ms",
363
+ 1100: "1100ms",
364
+ 1150: "1150ms",
365
+ 1200: "1200ms",
366
+ 1250: "1250ms",
367
+ 1300: "1300ms",
368
+ 1350: "1350ms",
369
+ 1400: "1400ms",
370
+ 1500: "1500ms",
371
+ 1600: "1600ms",
372
+ 1650: "1650ms",
373
+ 1700: "1700ms",
374
+ 1750: "1750ms",
375
+ 1800: "1800ms",
376
+ 1950: "1950ms",
377
+ 2000: "2000ms",
378
+ 2100: "2100ms",
379
+ 2200: "2200ms",
380
+ 2250: "2250ms",
381
+ 2400: "2400ms",
382
+ 2500: "2500ms",
383
+ 2550: "2550ms",
384
+ 2600: "2600ms",
385
+ 2700: "2700ms",
386
+ 2800: "2800ms",
387
+ 3000: "3000ms",
388
+ 3300: "3300ms",
389
+ 3900: "3900ms",
390
+ 4000: "4000ms",
391
+ 5000: "5000ms",
392
+ },
393
+ transitionDuration: {
394
+ 300: "300ms",
395
+ 1000: "1000ms",
396
+ 2000: "2000ms",
397
+ 5000: "5000ms",
398
+ 60000: "60000ms",
399
+ 300000: "300000ms",
400
+ },
401
+ borderWidth: {
402
+ 1: "1px",
403
+ 2: "2px",
404
+ 3: "3px",
405
+ 4: "4px",
406
+ 5: "5px",
407
+ 6: "6px",
408
+ 7: "7px",
409
+ 8: "8px",
410
+ },
411
+ opacity: {
412
+ 32: ".32",
413
+ },
414
+ scale: {
415
+ 101: "1.01",
416
+ 110: "1.1",
417
+ 120: "1.2",
418
+ 200: "2",
419
+ },
420
+ skew: {
421
+ 20: "20deg",
422
+ 30: "30deg",
423
+ 39: "39deg",
424
+ 45: "45deg",
425
+ 60: "60deg",
426
+ },
427
+ brightness: {
428
+ 10: ".1",
429
+ 20: ".2",
430
+ 30: ".3",
431
+ 40: ".4",
432
+ },
433
+ fontSize: {
434
+ "2xs": "0.625rem",
435
+ xs: "0.75rem",
436
+ sm: "0.875rem",
437
+ base: "1rem",
438
+ lg: "1.125rem",
439
+ xl: "1.25rem",
440
+ "2xl": "1.5rem",
441
+ "3xl": "1.875rem",
442
+ "4xl": "2.25rem",
443
+ "5xl": "3rem",
444
+ "6xl": "3.75rem",
445
+ "7xl": "4.5rem",
446
+ "8xl": "6rem",
447
+ "9xl": "8rem",
448
+ "10xl": "10rem",
449
+ "11xl": "12rem",
450
+ },
451
+ screens: {
452
+ xxxs: "332px",
453
+ xxs: "393px",
454
+ xs: "480px",
455
+ sm: "640px",
456
+ md: "768px", // IPad Mini
457
+ mmd: "840px",
458
+ xm: "964px", // IPad Air, IPad Pro 11.
459
+ lg: "1024px", // IPad Mini Horizontal Viewport
460
+ ml: "1160px", // IPad Air, IPad Pro 11.
461
+ xl: "1280px",
462
+ "2xl": "1536px",
463
+ },
464
+ inset: {
465
+ "1/20": "5%",
466
+ "1/10": "10%",
467
+ "2/10": "5%",
468
+ "1/5": "20%",
469
+ "2/5": "40%",
470
+ "4/5": "80%",
471
+ "1/4": "25%",
472
+ "1/3": "33.3333333%",
473
+ "5/100": "5%",
474
+ "10/100": "10%",
475
+ "15/100": "15%",
476
+ "36/100": "36%",
477
+ "43/100": "43%",
478
+ "46/100": "46%",
479
+ },
480
+ width: {
481
+ 90: "22.5rem",
482
+ 120: "30rem",
483
+ 176: "44rem",
484
+ "2/3": "66.6666667%",
485
+ "1/7": "14.2857143%",
486
+ "2/7": "28.5714286%",
487
+ "3/7": "42.8571429%",
488
+ "4/7": "57.1428571%",
489
+ "1/8": "12.5%",
490
+ "3/10": "30%",
491
+ "1/10": "10%",
492
+ "4/10": "40%",
493
+ "6/10": "60%",
494
+ "7/10": "70%",
495
+ "9/10": "90%",
496
+ // percentile width
497
+ "1/100": "1%",
498
+ "2/100": "2%",
499
+ "3/100": "3%",
500
+ "4/100": "4%",
501
+ "5/100": "5%",
502
+ "6/100": "6%",
503
+ "7/100": "7%",
504
+ "8/100": "8%",
505
+ "9/100": "9%",
506
+ "10/100": "10%",
507
+ "11/100": "11%",
508
+ "12/100": "12%",
509
+ "13/100": "13%",
510
+ "14/100": "14%",
511
+ "15/100": "15%",
512
+ "16/100": "16%",
513
+ "17/100": "17%",
514
+ "18/100": "18%",
515
+ "19/100": "19%",
516
+ "20/100": "20%",
517
+ "21/100": "21%",
518
+ "22/100": "22%",
519
+ "23/100": "23%",
520
+ "24/100": "24%",
521
+ "25/100": "25%",
522
+ "26/100": "26%",
523
+ "27/100": "27%",
524
+ "28/100": "28%",
525
+ "29/100": "29%",
526
+ "30/100": "30%",
527
+ "31/100": "31%",
528
+ "32/100": "32%",
529
+ "33/100": "33%",
530
+ "34/100": "34%",
531
+ "35/100": "35%",
532
+ "36/100": "36%",
533
+ "37/100": "37%",
534
+ "38/100": "38%",
535
+ "39/100": "39%",
536
+ "40/100": "40%",
537
+ "41/100": "41%",
538
+ "42/100": "42%",
539
+ "43/100": "43%",
540
+ "44/100": "44%",
541
+ "45/100": "45%",
542
+ "46/100": "46%",
543
+ "47/100": "47%",
544
+ "48/100": "48%",
545
+ "49/100": "49%",
546
+ "50/100": "50%",
547
+ "51/100": "51%",
548
+ "52/100": "52%",
549
+ "53/100": "53%",
550
+ "54/100": "54%",
551
+ "55/100": "55%",
552
+ "56/100": "56%",
553
+ "57/100": "57%",
554
+ "58/100": "58%",
555
+ "59/100": "59%",
556
+ "60/100": "60%",
557
+ "61/100": "61%",
558
+ "62/100": "62%",
559
+ "63/100": "63%",
560
+ "64/100": "64%",
561
+ "65/100": "65%",
562
+ "66/100": "66%",
563
+ "67/100": "67%",
564
+ "68/100": "68%",
565
+ "69/100": "69%",
566
+ "70/100": "70%",
567
+ "71/100": "71%",
568
+ "72/100": "72%",
569
+ "73/100": "73%",
570
+ "74/100": "74%",
571
+ "75/100": "75%",
572
+ "76/100": "76%",
573
+ "77/100": "77%",
574
+ "78/100": "78%",
575
+ "79/100": "79%",
576
+ "80/100": "80%",
577
+ "81/100": "81%",
578
+ "82/100": "82%",
579
+ "83/100": "83%",
580
+ "84/100": "84%",
581
+ "85/100": "85%",
582
+ "86/100": "86%",
583
+ "87/100": "87%",
584
+ "88/100": "88%",
585
+ "89/100": "89%",
586
+ "90/100": "90%",
587
+ "91/100": "91%",
588
+ "92/100": "92%",
589
+ "93/100": "93%",
590
+ "94/100": "94%",
591
+ "95/100": "95%",
592
+ "96/100": "96%",
593
+ "97/100": "97%",
594
+ "98/100": "98%",
595
+ "99/100": "99%",
596
+ "100/100": "100%",
597
+ },
598
+ height: {
599
+ "2/3": "66.6666667%",
600
+ "4/7": "57.1428571%",
601
+ "3/7": "42.8571429%",
602
+ "5/12": "41.6666667%",
603
+ "1/10": "10%",
604
+ "3/10": "30%",
605
+ "4/10": "40%",
606
+ "6/10": "60%",
607
+ "7/10": "70%",
608
+ "9/10": "90%",
609
+ },
610
+ zIndex: {
611
+ "100": "100",
612
+ "90": "90",
613
+ "50": "50",
614
+ "49": "49",
615
+ "48": "48",
616
+ "47": "47",
617
+ "46": "46",
618
+ "45": "45",
619
+ "44": "44",
620
+ "43": "43",
621
+ "42": "42",
622
+ "41": "41",
623
+ "40": "40",
624
+ "30": "30",
625
+ "20": "20",
626
+ "10": "10",
627
+ "0": "0",
628
+ },
629
+ },
630
+ },
631
+ safelist: [
632
+ {
633
+ pattern: /top-.*/,
634
+ },
635
+ {
636
+ pattern: /-top-.*/,
637
+ },
638
+ {
639
+ pattern: /bottom*.*/,
640
+ },
641
+ {
642
+ pattern: /left-.*/,
643
+ },
644
+ {
645
+ pattern: /-left-.*/,
646
+ },
647
+ {
648
+ pattern: /right*.*/,
649
+ },
650
+ {
651
+ pattern: /delay-.*/,
652
+ },
653
+ ],
654
+ plugins: [
655
+ tailwindcssAnimate,
656
+ function ({ addUtilities }: PluginAPI) {
657
+ addUtilities(
658
+ {
659
+ ".scrollbar-hidden::-webkit-scrollbar": {
660
+ display: "none", // For WebKit browsers
661
+ },
662
+ ".scrollbar-hidden": {
663
+ "-ms-overflow-style": "none", // For Internet Explorer and Edge
664
+ "scrollbar-width": "none", // For Firefox
665
+ },
666
+ },
667
+ {
668
+ respectPrefix: false,
669
+ respectImportant: false,
670
+ }
671
+ );
672
+ },
673
+ ],
674
+ darkMode: "selector",
675
+ } satisfies Config;