-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
56 lines (52 loc) · 1.33 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
// tailwind.config.js
const generateColorClass = (variable) => {
return ({ opacityValue }) =>
opacityValue
? `rgba(var(--${variable}), ${opacityValue})`
: `rgb(var(--${variable}))`
}
const textColor = {
primary: generateColorClass('text-primary'),
secondary: generateColorClass('text-secondary'),
tertiary: generateColorClass('text-tertiary'),
}
const backgroundColor = {
primary: generateColorClass('bg-primary'),
secondary: generateColorClass('bg-secondary'),
tertiary: generateColorClass('bg-tertiary'),
}
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
millimitre: ['Millimetre', 'sans-serif'],
ogaki: ['Ogaki', 'sans-serif'],
sombrablack: ['SombraBlack', 'sans-serif'],
caslon: ['Caslon', 'serif'],
roboto: ['Roboto', 'sans-serif'],
shwarzkopf: ['schwarzkopf-new', 'serif'],
shwarzkopfOld: ['schwarzkopf-old', 'serif'],
},
extend: {
textColor,
backgroundColor,
colors: {
'back-brown': '#523b35',
},
spacing: {
xxs: '4px',
xs: '8px',
sm: '16px',
md: '24px',
lg: '32px',
xl: '40px',
'2xl': '48px',
},
},
},
variants: {
extend: {},
},
plugins: [],
}