-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.ts
111 lines (105 loc) · 2.58 KB
/
tailwind.config.ts
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
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/**/*.{ts,tsx}"
],
theme: {
colors: {
"text": {
"DEFAULT": "hsl(0, 0%, 100%)",
50: "hsl(0, 0%, 100%)",
100: "hsl(0, 0%, 90%)",
200: "hsl(0, 0%, 80%)",
300: "hsl(0, 0%, 70%)",
400: "hsl(0, 0%, 60%)",
500: "hsl(0, 0%, 50%)",
600: "hsl(0, 0%, 40%)",
700: "hsl(0, 0%, 30%)",
800: "hsl(0, 0%, 20%)",
900: "hsl(0, 0%, 10%)",
950: "hsl(0, 0%, 5%)"
},
"background": {
"DEFAULT": "hsl(240, 14%, 10%)",
50: "hsl(240, 12%, 95%)",
100: "hsl(240, 12%, 90%)",
200: "hsl(240, 12%, 80%)",
300: "hsl(240, 12%, 70%)",
400: "hsl(240, 12%, 60%)",
500: "hsl(240, 12%, 50%)",
600: "hsl(240, 12%, 40%)",
700: "hsl(240, 12%, 30%)",
800: "hsl(240, 12%, 20%)",
900: "hsl(240, 12%, 10%)",
950: "hsl(240, 12%, 5%)"
},
"primary": {
"DEFAULT": "hsl(212, 88%, 50%)",
50: "hsl(210, 85%, 95%)",
100: "hsl(212, 88%, 90%)",
200: "hsl(212, 88%, 80%)",
300: "hsl(212, 88%, 70%)",
400: "hsl(212, 88%, 60%)",
500: "hsl(212, 88%, 50%)",
600: "hsl(212, 88%, 40%)",
700: "hsl(212, 88%, 30%)",
800: "hsl(212, 88%, 20%)",
900: "hsl(212, 88%, 10%)",
950: "hsl(213, 85%, 5%)"
},
"secondary": {
"DEFAULT": "hsl(52, 59%, 70%)",
50: "hsl(52, 60%, 95%)",
100: "hsl(52, 61%, 90%)",
200: "hsl(53, 59%, 80%)",
300: "hsl(53, 59%, 70%)",
400: "hsl(53, 59%, 60%)",
500: "hsl(53, 59%, 50%)",
600: "hsl(53, 59%, 40%)",
700: "hsl(53, 59%, 30%)",
800: "hsl(53, 59%, 20%)",
900: "hsl(52, 61%, 10%)",
950: "hsl(56, 60%, 5%)"
},
"accent": {
"DEFAULT": "hsl(262, 42%, 40%)",
50: "hsl(262, 44%, 95%)",
100: "hsl(263, 41%, 90%)",
200: "hsl(261, 41%, 80%)",
300: "hsl(262, 42%, 70%)",
400: "hsl(262, 42%, 60%)",
500: "hsl(262, 42%, 50%)",
600: "hsl(262, 42%, 40%)",
700: "hsl(262, 42%, 30%)",
800: "hsl(261, 41%, 20%)",
900: "hsl(263, 41%, 10%)",
950: "hsl(262, 44%, 5%)"
}
},
extend: {
backgroundImage: {
"starfield": "url(\"/starfield.svg\")"
},
data: {
"state-open": "state~=open"
},
keyframes: {
blink: {
"0%": { opacity: "1" },
"49.99%": { opacity: "1" },
"50%": { opacity: "0" },
"99.99%": { opacity: "0" },
"100%": { opacity: "1" }
}
},
animation: {
blink: "blink 1.35s infinite"
},
dropShadow: {
"hero": "0 100px 200px rgba(255, 255, 255, 0.45)"
}
}
},
plugins: []
};
export default config;