-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.cjs
115 lines (114 loc) · 2.73 KB
/
tailwind.config.cjs
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
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js,ts,jsx,tsx}", "./src/**/*.{html,tsx,jsx,js,ts}"],
darkMode: "class",
theme: {
backgroundColor: ({ theme }) => ({
...theme("colors"),
base: "#dbdbdb",
baseDark: "#333",
card: "#fefefe",
cardDark: "#0a0a0a",
navbarBase: "#2c2c2c",
navbarBaseHover: "#1e1e1e",
primaryBlue: "#2b1cd9",
primaryBlueHover: "#2114b1",
secondaryBlue: "#0c99ff",
secondaryBlueHover: "#0c7dce",
switchActive: "#c7c7c7",
switchInActive: "#2c2c2c",
}),
borderColor: ({ theme }) => ({
...theme("colors"),
DEFAULT: theme("colors.gray.200", "currentColor"),
switchBorderColor: "#505050",
}),
screens: {
xs5: "200px",
xs4: "300px",
xs3: "400px",
xs2: "500px",
xs: "768px",
sm: "976px",
md: "1025px",
lg: "1280px",
xl: "1440px",
},
height: ({ theme }) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
full: "100%",
screen: "100vh",
min: "min-content",
max: "max-content",
fit: "fit-content",
switchBase: "20px",
switchThumb: "30px",
}),
width: ({ theme }) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
full: "100%",
screen: "100vw",
min: "min-content",
max: "max-content",
fit: "fit-content",
switchBase: "50px",
swithThumb: "30px",
}),
fontFamily: {
sans: ["Graphik", "sans-serif"],
serif: ["Merriweather", "serif"],
roboto: ["Roboto", "serif"],
bebas: ["BebasNeueu", "serif"],
},
extend: {},
},
plugins: [
require("tailwindcss"),
require("postcss"),
require("autoprefixer"),
require("@tailwindcss/line-clamp"),
],
};