-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
94 lines (89 loc) · 2.56 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
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
/* solution to fix dnd issue 👉 */
/* from documentation: The important option lets you control whether or not Tailwind’s utilities should be marked with !important. This can be really useful when using Tailwind with existing CSS that has high specificity selectors.(https://tailwindcss.com/docs/configuration) */
/* important: true, */
/* (Can remove/out-comment ⬆ and in List do !top-auto !left-auto instead of top-auto left-auto -> cleaner) */
theme: {
extend: {
colors: {
grayish: "#e6ecf0",
navMobile: "#d8e0e8",
blueish: "#50b7f5",
hoverBluish: "#3799d4",
orange: "#FF6600",
orangeHover: "#ff9e5e",
testBg: "#caccce",
whiteSmoke: "#E8E8E8",
whiteExp: "#FAF9F6",
purpleish: "#482980",
hoverPurpleish: "#341d5c",
lightBlueish: "#e8f5fe",
},
fontFamily: {
mainFontHelv: "helvetica",
},
spacing: {
postPrimaryDivSpacing: "66px",
largeTest: "512px",
xxxxxl: "1024px",
widgetsPaddingWidthTemp: "88px",
notificationWidth: "350px",
3.25: "13px",
},
screens: {
widthForShowDate: "998px",
mdLgTest: "890px",
smallerTest: "640px",
xs: "500px",
},
borderRadius: {
widgetsBorder: "20px",
},
borderWidth: {
3: "3px",
},
backgroundImage: {
loginPic:
"url(https://images.unsplash.com/photo-1593305841991-05c297ba4575?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=953&q=80)",
},
minWidth: {
"min-width": "fit-content",
widgetsMinWidth: "270px",
},
maxWidth: {
detailsAboutLogin: "285px",
notificationHeader: "190px",
notificationHeaderReward: "210px",
notificationText: "175px",
notificationTextReward: "130px",
profileAvatar: "255px",
postImageMobile: "78%",
postImageDesktop: "80%",
avatarField: "80px",
},
width: {
0.5: "2px",
"89%": "89%",
22: "88px",
},
fontSize: {
verySmall: "11px",
},
height: {
4.5: "18px",
18: "76px",
22: "88px",
},
transitionDuration: {
125: "125ms",
},
},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/forms")],
};