/
tailwind.config.js
94 lines (94 loc) · 2.15 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
module.exports = {
theme: {
animations: {
// defaults to {}; the following are examples
spin: {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
}
},
jump: {
"0%": {
transform: "translateY(0%)"
},
"50%": {
transform: "translateY(-100%)"
},
"100%": {
transform: "translateY(0%)"
}
}
},
animationDuration: {
// defaults to these values
default: "1s",
"0s": "0s",
"1s": "1s",
"2s": "2s",
"3s": "3s",
"4s": "4s",
"5s": "5s"
},
animationTimingFunction: {
// defaults to these values
default: "ease",
linear: "linear",
ease: "ease",
"ease-in": "ease-in",
"ease-out": "ease-out",
"ease-in-out": "ease-in-out"
},
animationDelay: {
// defaults to these values
default: "0s",
"0s": "0s",
"1s": "1s",
"2s": "2s",
"3s": "3s",
"4s": "4s",
"5s": "5s"
},
animationIterationCount: {
// defaults to these values
default: "infinite",
once: "1",
infinite: "infinite"
},
animationDirection: {
// defaults to these values
default: "normal",
normal: "normal",
reverse: "reverse",
alternate: "alternate",
"alternate-reverse": "alternate-reverse"
},
animationFillMode: {
// defaults to these values
default: "none",
none: "none",
forwards: "forwards",
backwards: "backwards",
both: "both"
},
animationPlayState: {
// defaults to these values
running: "running",
paused: "paused"
}
},
variants: {
// all the following default to ['responsive']
animations: ["responsive"],
animationDuration: ["responsive"],
animationTimingFunction: ["responsive"],
animationDelay: ["responsive"],
animationIterationCount: ["responsive"],
animationDirection: ["responsive"],
animationFillMode: ["responsive"],
animationPlayState: ["responsive"]
},
plugins: [require("tailwindcss-animations")]
};