/
tailwind.config.js
60 lines (55 loc) · 1.95 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
module.exports = {
theme: {
extend: {
colors: {
background: {
// -- light --
// -- need to adjust footer and showcase styles!
// primary: '#eee2dc',
// secondary: '#bab2b5'
// -- dark --
primary: '#0b0c10',
secondary: '#1f2833'
},
// -- light --
// header: '#ac3b61',
// paragraph: '#123c69'
// -- dark --
header: '#66fcf1',
paragraph: '#c5c6c7'
},
fontFamily: {
header: ['Goldman', 'sans-serif'],
sans: ['Quattrocento Sans', 'sans-serif']
}
},
},
plugins: [baseStyles, utilityColors]
}
///////////////////////////////////////////////////////////////////////
function baseStyles({ addBase, theme }) {
const bgColor = color => ({ 'background': color });
const textColor = color => ({ 'color': color });
const fontFamily = family => ({ 'font-family': family });
addBase({
'body': bgColor(theme('colors.background.primary')),
[`h1,h2,h3,h4,h5,h6`]: {
...textColor(theme('colors.header')),
...fontFamily(theme('fontFamily.header'))
},
'p': textColor(theme('colors.paragraph')),
'a': textColor(theme('colors.blue.600')),
});
}
function utilityColors({ addUtilities, theme }) {
const bgColor = color => ({ 'background': color });
const textColor = color => ({ 'color': color });
addUtilities({
'.background-primary': bgColor(
theme('colors.background.primary')),
'.background-secondary': bgColor(
theme('colors.background.secondary')),
'.text-color-header': textColor(theme('colors.header')),
'.text-color-paragraph': textColor(theme('colors.paragraph')),
});
}