@edu-tosel/design 1.0.334 → 1.0.341

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