forked from teamducro/gloomhaven-storyline
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
179 lines (178 loc) · 7.66 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
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
const plugin = require('tailwindcss/plugin');
const {colors} = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./resources/**/*.html',
'./resources/**/*.vue',
'./resources/**/*.js',
'./resources/**/*.svg'
],
theme: {
extend: {
fontFamily: {
default: ['Nyala', 'sans-serif'],
title: ['Pirata One', 'Nyala', 'sans-serif'],
},
inset: {
'area-inset-top': 'env(safe-area-inset-top, 0)',
'area-inset-right': 'env(safe-area-inset-right, 0)',
'area-inset-bottom': 'env(safe-area-inset-bottom, 0)',
'area-inset-left': 'env(safe-area-inset-left, 0)'
},
spacing: {
'.5': '0.125rem',
11: '2.75rem',
28: '7rem',
'area-inset-top': 'env(safe-area-inset-top, 0)',
'area-inset-right': 'env(safe-area-inset-right, 0)',
'area-inset-bottom': 'env(safe-area-inset-bottom, 0)',
'area-inset-left': 'env(safe-area-inset-left, 0)'
},
screens: {
xs: '400px',
lgh: {'raw': '(min-height: 600px)'}
},
zIndex: {
1: '1',
5: '5'
},
lineHeight: {
'12': '3rem',
},
colors: {
primary: '#3771E0',
'primary-dark': '#2356b7',
secondary: '#018786',
background: '#000',
surface: '#111',
complete: '#3B8585',
incomplete: '#A13C2F',
required: '#E9A678',
gold: '#E2A246',
'light-gray': '#E0E0E0',
black2: {
25: 'rgba(0, 0, 0, .25)',
50: 'rgba(0, 0, 0, .50)',
75: 'rgba(0, 0, 0, .75)'
},
white2: {
25: 'rgba(255, 255, 255, .25)',
50: 'rgba(255, 255, 255, .50)',
60: 'rgba(255, 255, 255, .60)',
75: 'rgba(255, 255, 255, .75)',
87: 'rgba(255, 255, 255, .87)'
},
red: {
...colors.red,
50: 'rgba(255, 100, 100, .50)'
},
green: {
...colors.green,
50: 'rgba(100, 255, 100, .50)'
}
}
}
},
variants: {
// accessibility: ['important', 'responsive', 'focus'],
// alignContent: ['important', 'responsive'],
// alignItems: ['important', 'responsive'],
// alignSelf: ['important', 'responsive'],
// appearance: ['important', 'responsive'],
// backgroundAttachment: ['important', 'responsive'],
backgroundColor: ['important', 'responsive', 'hover', 'focus'],
// backgroundPosition: ['important', 'responsive'],
// backgroundRepeat: ['important', 'responsive'],
// backgroundSize: ['important', 'responsive'],
// borderCollapse: ['important', 'responsive'],
// borderColor: ['important', 'responsive', 'hover', 'focus'],
// borderRadius: ['important', 'responsive'],
// borderStyle: ['important', 'responsive'],
// borderWidth: ['important', 'responsive'],
// boxShadow: ['important', 'responsive', 'hover', 'focus'],
// boxSizing: ['important', 'responsive'],
// cursor: ['important', 'responsive'],
// display: ['important', 'responsive'],
// fill: ['important', 'responsive'],
// flex: ['important', 'responsive'],
// flexDirection: ['important', 'responsive'],
// flexGrow: ['important', 'responsive'],
// flexShrink: ['important', 'responsive'],
// flexWrap: ['important', 'responsive'],
// float: ['important', 'responsive'],
// clear: ['important', 'responsive'],
// fontFamily: ['important', 'responsive'],
fontSize: ['important', 'responsive'],
// fontSmoothing: ['important', 'responsive'],
// fontStyle: ['important', 'responsive'],
// fontWeight: ['important', 'responsive', 'hover', 'focus'],
// height: ['important', 'responsive'],
// inset: ['important', 'responsive'],
// justifyContent: ['important', 'responsive'],
// letterSpacing: ['important', 'responsive'],
// lineHeight: ['important', 'responsive'],
// listStylePosition: ['important', 'responsive'],
// listStyleType: ['important', 'responsive'],
margin: ['important', 'responsive'],
// maxHeight: ['important', 'responsive'],
// maxWidth: ['important', 'responsive'],
// minHeight: ['important', 'responsive'],
// minWidth: ['important', 'responsive'],
// objectFit: ['important', 'responsive'],
// objectPosition: ['important', 'responsive'],
// opacity: ['important', 'responsive', 'hover', 'focus'],
// order: ['important', 'responsive'],
// outline: ['important', 'responsive', 'focus'],
// overflow: ['important', 'responsive'],
// padding: ['important', 'responsive'],
// placeholderColor: ['important', 'responsive', 'focus'],
// pointerEvents: ['important', 'responsive'],
// position: ['important', 'responsive'],
// resize: ['important', 'responsive'],
// stroke: ['important', 'responsive'],
// strokeWidth: ['important', 'responsive'],
// tableLayout: ['important', 'responsive'],
// textAlign: ['important', 'responsive'],
textColor: ['important', 'responsive', 'hover', 'focus'],
// textDecoration: ['important', 'responsive', 'hover', 'focus'],
// textTransform: ['important', 'responsive'],
// userSelect: ['important', 'responsive'],
// verticalAlign: ['important', 'responsive'],
// visibility: ['important', 'responsive'],
// whitespace: ['important', 'responsive'],
// width: ['important', 'responsive'],
// wordBreak: ['important', 'responsive'],
// zIndex: ['important', 'responsive'],
// gap: ['important', 'responsive'],
// gridAutoFlow: ['important', 'responsive'],
// gridTemplateColumns: ['important', 'responsive'],
// gridColumn: ['important', 'responsive'],
// gridColumnStart: ['important', 'responsive'],
// gridColumnEnd: ['important', 'responsive'],
// gridTemplateRows: ['important', 'responsive'],
// gridRow: ['important', 'responsive'],
// gridRowStart: ['important', 'responsive'],
// gridRowEnd: ['important', 'responsive'],
// transform: ['important', 'responsive'],
// transformOrigin: ['important', 'responsive'],
// scale: ['important', 'responsive', 'hover', 'focus'],
// rotate: ['important', 'responsive', 'hover', 'focus'],
// translate: ['important', 'responsive', 'hover', 'focus'],
// skew: ['important', 'responsive', 'hover', 'focus'],
// transitionProperty: ['important', 'responsive'],
// transitionTimingFunction: ['important', 'responsive'],
// transitionDuration: ['important', 'responsive'],
},
plugins: [
plugin(function ({addVariant}) {
addVariant('important', ({container}) => {
container.walkRules(rule => {
rule.selector = `.i-${rule.selector.slice(1)}`;
rule.walkDecls(decl => {
decl.important = true;
})
})
})
})
]
};