/
tailwind.config.js
62 lines (62 loc) · 2.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
51
52
53
54
55
56
57
58
59
60
61
62
module.exports = {
darkMode: 'class',
content: [
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx}',
'./src/**/**/*.{js,ts,jsx,tsx}',
'./src/**/**/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
// Add your custom colors here
customRed: '#FF0000',
customBlue: '#0000FF',
primary2: 'var(--color-primary)',
primary: 'rgb(var(--color-primary))',
secondary: 'rgb(var(--color-secondary))',
backgroundone: 'rgb(var(--color-background-one))',
backgroundtwo: 'rgb(var(--color-background-two))',
backgroundthree: 'rgb(var(--color-background-three))',
backgroundfour: 'rgb(var(--color-background-four))',
texttest: '#d2bab0',
textone: 'rgb(var(--color-text-one))',
texttwo: 'rgb(var(--color-text-two))',
backgroundonedark: 'var(--color-background-one-dark)',
backgroundtwodark: 'var(--color-background-two-dark)',
backgroundthreedark: 'var(--color-background-three-dark)',
backgroundfourdark: 'var(--color-background-four-dark)',
textonedark: 'var(--color-text-one-dark)',
texttwodark: 'var(--color-text-two-dark)',
accent: 'rgb(var(--color-accent))',
bg1: 'var(--color-background-one)',
bg2: 'var(--color-background-two)',
bg3: 'var(--color-background-three)',
bg4: 'var(--color-background-four)',
bg5: 'var(--color-background-five)',
bg6: 'var(--color-background-six)',
bg1dark: 'var(--color-background-one-dark)',
bg2dark: 'var(--color-background-two-dark)',
bg3dark: 'var(--color-background-three-dark)',
bg4dark: 'var(--color-background-four-dark)',
bg5dark: 'var(--color-background-five-dark)',
bg6dark: 'var(--color-background-six-dark)',
prim1: 'var(--color-prim-100)',
prim2: 'var(--color-prim-200)',
prim3: 'var(--color-prim-300)',
prim4: 'var(--color-prim-400)',
prim5: 'var(--color-prim-500)',
prim6: 'var(--color-prim-600)',
// ...
},
},
},
variants: {
backgroundColor: ({ after }) => after(['disabled']),
textColor: ({ after }) => after(['disabled']),
extend: {
width: ['focus'],
},
},
plugins: [],
}