nextpage_frontend/tailwind.config.ts at develop · Project-NextPage/nextpage_frontend · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      screens: {
        // md: '925px',
        // lg: '1210px',
        // xl: '1490px',
        md: '1024px',
        lg: '1280px',
      },
      fontFamily: {
        Minecraft: ['Minecraft'],
        DungGeunMo: ['DungGeunMo'],
        NextPage: ['NextPage'],
      },
      keyframes: {
        bounce: {
          '0%, 100%': {
            transform: 'translateY(-25%)',
            animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
          },
          '50%': {
            transform: 'translateY(0)',
            animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
          },
        },
        'slide-left': {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-100px)' },
        },
        'slide-bl': {
          '0%': {
            transform: 'translateY(-60px) translateX(50px)',
          },
          '100%': {
            transform: 'translateY(40px) translateX(-50px)',
          },
        },
        'scale-up-center': {
          '0%': {
            transform: 'scale(0.5)',
          },
          '100%': {
            transform: 'scale(1)',
          },
        },
        'scale-up-hor-left': {
          '0%': {
            transform: 'scaleX(0.5)',
            transformOrigin: '0% 0%',
          },
          '100%': {
            transform: 'scaleX(1)',
            transformOrigin: '0% 0%',
          },
        },
        'scale-up-ver-bottom': {
          '0%': {
            transform: 'scaleY(0.4)',
            transformOrigin: '0% 100%',
          },
          '100%': {
            transform: 'scaleY(1)',
            transformOrigin: '0% 100%',
          },
        },
        'scale-up-ver-top': {
          '0%': {
            transform: 'scaleY(0.4)',
            transformOrigin: '100% 0%',
          },
          '100%': {
            transform: 'scaleY(1)',
            transformOrigin: '100% 0%',
          },
        },
        'flip-card': {
          '0%, 20%, 100%': {
            transform: 'rotateY(0)',
          },
          '50%, 70%': {
            transform: 'rotateY(180deg)',
          },
        },
        'flip-vertical-fwd': {
          '0%, 100%': {
            transform: 'translateZ(0) rotateY(0)',
          },
          '50%': {
            transform: 'translateZ(160px) rotateY(180deg)',
          },
        },
        'scale-up-ver-center': {
          '0%': {
            transform: 'scaleY(0.4)',
          },
          '100%': {
            transform: 'scaleY(1)',
          },
        },
        'slide-fwd-center': {
          '0%': {
            // transform: "translateZ(0)",
            transform: 'rotateY(180deg)',
          },
          '100%': {
            // transform: "translateZ(460px)",
            transform: 'rotateY(360deg)',
          },
          // "0%": { transform: "translateZ(-80px)", opacity: "0" },
          // "100%": { transform: "translateZ(0)", opacity: "1" },
        },
      },
      animation: {
        bounce: 'bounce 1.5s infinite',
        hidden: 'opacity 0.2s',
        'slide-left':
          'slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
        'slide-bl': 'slide-bl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
        'scale-up-center':
          'scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
        'scale-up-hor-left':
          'scale-up-hor-left 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
        'scale-up-ver-top':
          'scale-up-ver-top 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
        'scale-up-ver-bottom':
          'scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
        'flip-card': 'flip-card 3s infinite',
        'flip-vertical-fwd':
          'flip-vertical-fwd 2.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite',
        'slide-fwd-center':
          'slide-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
        'scale-up-ver-center':
          'scale-up-ver-center 0.25s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
      },
    },
  },
  plugins: [],
}