-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.js
154 lines (154 loc) · 5.6 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
export default {
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
fontSize: {
'2xs': [
'0.6rem',
{
lineHeight: '1rem',
},
],
},
screens: {
'h-xs': { raw: '(max-height: 460px)' },
},
boxShadow: {
center: '0 0 12px 0 rgb(0 0 0 / 0.1)',
'white-center': '0 0 12px 0 rgb(255 255 255 / .5)',
},
dropShadow: {
'center-lg': '0 0 12px white',
center: '0 0 6px white',
'center-sm': '0 0 3px white',
'center-xs': '0 0 1px white',
'center-ice': '0 0 6px rgb(var(--color-ice-600) / 0.7)',
'center-purple': '0 0 6px rgb(var(--color-purple-600) / 0.7)',
},
backgroundImage: {
'main-gradient':
'linear-gradient(135deg, rgb(var(--color-green-400)), rgb(var(--color-cyan-500)), rgb(var(--color-blue-400)), rgb(var(--color-ice-400)))',
'explanation-gradient':
'linear-gradient(135deg, rgb(var(--color-purple-500)), rgb(var(--color-cyan-500)))',
'features-gradient':
'linear-gradient(135deg, rgb(var(--color-pink-500)), rgb(var(--color-blue-500)))',
},
colors: {
pink: {
50: 'rgb(var(--color-pink-50))',
100: 'rgb(var(--color-pink-100))',
200: 'rgb(var(--color-pink-200))',
300: 'rgb(var(--color-pink-300))',
400: 'rgb(var(--color-pink-400))',
500: 'rgb(var(--color-pink-500))',
600: 'rgb(var(--color-pink-600))',
700: 'rgb(var(--color-pink-700))',
800: 'rgb(var(--color-pink-800))',
900: 'rgb(var(--color-pink-900))',
950: 'rgb(var(--color-pink-950))',
},
blue: {
50: 'rgb(var(--color-blue-50))',
100: 'rgb(var(--color-blue-100))',
200: 'rgb(var(--color-blue-200))',
300: 'rgb(var(--color-blue-300))',
400: 'rgb(var(--color-blue-400))',
500: 'rgb(var(--color-blue-500))',
600: 'rgb(var(--color-blue-600))',
700: 'rgb(var(--color-blue-700))',
800: 'rgb(var(--color-blue-800))',
900: 'rgb(var(--color-blue-900))',
950: 'rgb(var(--color-blue-950))',
},
red: {
50: 'rgb(var(--color-red-50))',
100: 'rgb(var(--color-red-100))',
200: 'rgb(var(--color-red-200))',
300: 'rgb(var(--color-red-300))',
400: 'rgb(var(--color-red-400))',
500: 'rgb(var(--color-red-500))',
600: 'rgb(var(--color-red-600))',
700: 'rgb(var(--color-red-700))',
800: 'rgb(var(--color-red-800))',
900: 'rgb(var(--color-red-900))',
950: 'rgb(var(--color-red-950))',
},
yellow: {
50: 'rgb(var(--color-yellow-50))',
100: 'rgb(var(--color-yellow-100))',
200: 'rgb(var(--color-yellow-200))',
300: 'rgb(var(--color-yellow-300))',
400: 'rgb(var(--color-yellow-400))',
500: 'rgb(var(--color-yellow-500))',
600: 'rgb(var(--color-yellow-600))',
700: 'rgb(var(--color-yellow-700))',
800: 'rgb(var(--color-yellow-800))',
900: 'rgb(var(--color-yellow-900))',
950: 'rgb(var(--color-yellow-950))',
},
purple: {
50: 'rgb(var(--color-purple-50))',
100: 'rgb(var(--color-purple-100))',
200: 'rgb(var(--color-purple-200))',
300: 'rgb(var(--color-purple-300))',
400: 'rgb(var(--color-purple-400))',
500: 'rgb(var(--color-purple-500))',
600: 'rgb(var(--color-purple-600))',
700: 'rgb(var(--color-purple-700))',
800: 'rgb(var(--color-purple-800))',
900: 'rgb(var(--color-purple-900))',
950: 'rgb(var(--color-purple-950))',
},
// Existing colors
ice: {
50: 'rgb(var(--color-ice-50))',
100: 'rgb(var(--color-ice-100))',
200: 'rgb(var(--color-ice-200))',
300: 'rgb(var(--color-ice-300))',
400: 'rgb(var(--color-ice-400))',
500: 'rgb(var(--color-ice-500))',
600: 'rgb(var(--color-ice-600))',
700: 'rgb(var(--color-ice-700))',
800: 'rgb(var(--color-ice-800))',
900: 'rgb(var(--color-ice-900))',
950: 'rgb(var(--color-ice-950))',
},
green: {
50: 'rgb(var(--color-green-50))',
100: 'rgb(var(--color-green-100))',
200: 'rgb(var(--color-green-200))',
300: 'rgb(var(--color-green-300))',
400: 'rgb(var(--color-green-400))',
500: 'rgb(var(--color-green-500))',
600: 'rgb(var(--color-green-600))',
700: 'rgb(var(--color-green-700))',
800: 'rgb(var(--color-green-800))',
900: 'rgb(var(--color-green-900))',
950: 'rgb(var(--color-green-950))',
},
cyan: {
50: 'rgb(var(--color-cyan-50))',
100: 'rgb(var(--color-cyan-100))',
200: 'rgb(var(--color-cyan-200))',
300: 'rgb(var(--color-cyan-300))',
400: 'rgb(var(--color-cyan-400))',
500: 'rgb(var(--color-cyan-500))',
600: 'rgb(var(--color-cyan-600))',
700: 'rgb(var(--color-cyan-700))',
800: 'rgb(var(--color-cyan-800))',
900: 'rgb(var(--color-cyan-900))',
950: 'rgb(var(--color-cyan-950))',
},
},
},
},
plugins: [],
safelist: [
{
pattern: /pink|blue|cyan|purple|ice|green|white|red|yellow|black/,
variants: ['hover'],
},
{ pattern: /^bg-opacity-/, variants: ['hover'] },
{ pattern: /^border-opacity-/, variants: ['hover'] },
],
};