/
tailwind.config.cjs
55 lines (54 loc) · 1.1 KB
/
tailwind.config.cjs
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
const config = {
mode: 'jit',
purge: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
colors: {
white: '#ffffff',
sand: '#EBE4DC',
'light-blue': '#E8F4F4',
'medium-blue': '#465881',
mint: '#AEEADE',
caribbean: '#00E0FF',
blue: '#5FC7E4',
'light-teal': '#68D2C8',
teal: '#00789E',
yellow: '#E5A91E',
navy: '#1B2A49',
gray: '#333333',
black: '#000000',
transparent: 'transparent'
},
fontFamily: {
heading: "'Pacifico', cursive",
body: "'Quicksand', sans-serif"
},
extend: {
boxShadow: {
inset: 'inset 0px -5px 10px rgba(0, 0, 0, 0.25)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5);'
},
height: {
100: '100px'
},
inset: {
'1/2': '50%',
50: '50px',
100: '100px'
},
maxWidth: {
'7xl': '80rem',
'8xl': '2000px'
},
screens: {
'2xl': '1600px'
}
}
},
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
borderWidth: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
scale: ['responsive', 'hover', 'focus', 'active', 'group-hover']
},
plugins: []
}
module.exports = config