-
Notifications
You must be signed in to change notification settings - Fork 1
/
tailwind.config.js
50 lines (45 loc) · 1.25 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
// 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'),
// }
const textColor = {
primary: 'var(--text-primary)',
secondary: 'var(--text-secondary)',
tertiary: 'var(--text-tertiary)',
four: 'var(--text-four)',
five: 'var(--text-five)',
six: 'var(--text-six)',
};
const backgroundColor = {
primary: 'var(--bg-primary)',
secondary: 'var(--bg-secondary)',
tertiary: 'var(--bg-tertiary)',
four: 'var(--bg-four)',
five: 'var(--bg-five)',
};
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
textColor,
backgroundColor,
screens: {
betterhover: { raw: '(hover: hover)' },
},
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};