-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
122 lines (120 loc) · 2.59 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
/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
// eslint-disable-next-line @typescript-eslint/no-var-requires
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
container: {
center: true
},
screens: {
xs: { max: '639px' },
// => @media (max-width: 639px) { ... }
sm: '640px',
// => @media (min-width: 640px) { ... }
md: '768px',
// => @media (min-width: 768px) { ... }
lg: '1024px',
// => @media (min-width: 1024px) { ... }
xl: '1280px'
// => @media (min-width: 1280px) { ... }
},
extend: {
fontFamily: {
sans: ['Spoqa Han Sans Neo', 'sans-serif']
},
colors: {
primary: {
default: '#728892',
700: '#3F5866',
500: '#98A9B0',
300: '#C0CACF'
},
secondary: {
default: '#FD8F00',
700: '#FFAA2A',
500: '#FFC16F',
300: '#FFD9AA'
},
back: {
100: '#FFFFFF',
200: '#FAFAFA',
300: '#F4F4F4',
400: '#EEEEEE'
},
text: {
100: '#4C4C4C',
200: '#636363',
300: '#999999'
},
line: {
100: '#E6E6E6',
200: '#D3D3D3',
300: '#C8C8C8'
}
},
borderRadius: {
sm: '3px',
default: '5px',
lg: '10px',
xl: '25px'
},
inset: {
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
8: '2rem',
10: '2.5rem',
12: '3rem',
16: '4rem',
20: '5rem',
'1/2': '50%',
full: '100%'
},
animation: {
'fade-in': 'fade-in 1s ease-out'
},
keyframes: {
'fade-in': {
from: { opacity: 0 },
to: { opacity: 1 }
}
}
}
},
variants: ['responsive', 'hover'],
plugins: [
plugin(function ({ addBase }) {
addBase({
svg: {
display: 'inline'
},
img: {
display: 'inline'
}
})
})
],
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.tsx',
'components/**/*.jsx',
'pages/**/*.tsx',
'pages/**/*.jsx'
]
},
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
defaultLineHeights: true,
standardFontWeights: true
}
}