-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
74 lines (73 loc) · 2.35 KB
/
tailwind.config.js
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
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
clashDisplay: ['Clash Display', "sans-serif"],
montserrat: ['Montserrat', "sans-serif"],
unica: ['Unica One', 'cursive']
},
colors:{
getlinkedPurple: "#150E28",
primaryPink: "#D434FE"
},
backgroundImage: {
'btnBgGrad': ["linear-gradient(270deg, #903AFF 0%, #D434FE 56.42%, #FF26B9 99.99%, #FE34B9 100%)"],
'heroLineCurve': "url('src/assets/icons/line-curve.svg')",
'checkMark': "url('src/assets/icons/check-mark.png')",
},
backgroundSize: {
'30%': '30%',
},
boxShadow: {
'treeCounter': '0 0 0 8px #150E28',
'contactForm': '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
'input': '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
},
animation: {
'fadeInLeft': 'fadeInLeft 0.6s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
'fadeInRight': 'fadeInRight 0.6s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
'fadeInUp': 'fadeInUp 0.6s 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
'bounceInTop': 'bounceInTop 0.5s 1.3s ease-in-out both',
},
keyframes: {
slideDown: {
'100%': { translate: '0 100%' },
},
slideUp: {
'100%': { translate: '0 -100%' },
},
hide: {
'100%': { display: 'none' },
},
fadeInLeft: {
'0%': { translate: '-100px', opacity: '0' },
'100%': { translate: '0', opacity: '1' },
},
fadeInRight: {
'0%': { translate: '100px', opacity: '0' },
'100%': { translate: '0', opacity: '1' },
},
fadeInUp: {
'0%': { translate: '0 100px', opacity: '0' },
'100%': { translate: '0 0', opacity: '1' },
},
bounceInTop: {
'0%': { translate: '0 -300px', opacity: '0' },
'38%': { translate: '0 0'},
'55%': { translate: '0 -45px'},
'72%': { translate: '0 0'},
'81%': { translate: '0 -15px'},
'90%': { translate: '0 0', opacity: '1'},
'95%': { translate: '0 -8px'},
'100%': { translate: '0 0', opacity: '1' },
}
}
},
},
plugins: [],
}