-
Notifications
You must be signed in to change notification settings - Fork 2
/
tailwind.config.js
108 lines (108 loc) · 2.63 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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',
},
extend: {
transitionProperty: { // extending few more transition property
'height': 'height',
'spacing': 'margin, padding',
'slide-left': 'margin-right'
},
spacing: {
'0px': '0px',
'5px': '5px',
'3px': '3px',
'393px': '393px',
'-200px': '-200px',
'200px': '200px',
'21px': '21px',
}
},
inset: {
'0': 0,
'14px': '14px',
'-35px': '-35px'
}
},
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'),
],
};