-
Notifications
You must be signed in to change notification settings - Fork 1
/
tailwind.config.js
67 lines (66 loc) · 3.08 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
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
"darkBlue": "hsl(209, 23%, 22%)", // Dark Mode Elements
"veryDarkBlue-Dark": "hsl(207, 26%, 17%)", // Dark Mode Background
"veryDarkBlue-Light": "hsl(200, 15%, 8%)", // Light Mode Text
"darkGray": "hsl(0, 0%, 52%)", // Light Mode Input
"veryLightGray": "hsl(0, 0%, 98%)", // Light Mode Background
"white": "hsl(0, 0%, 100%)", // Dark Mode Text & Light Mode Elements
},
boxShadow: {
't-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
't-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
't-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
't-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
't-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
't-3xl': '0 -35px 60px -15px rgba(0, 0, 0, 0.3)',
'b-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'b-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06)',
'b-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05)',
'b-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04)',
'b-2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'b-3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
'l-sm': '-1px 0 2px 0 rgba(0, 0, 0, 0.05)',
'l-md': '-4px 0 6px -1px rgba(0, 0, 0, 0.1), 2px 0 4px -1px rgba(0, 0, 0, 0.06)',
'l-lg': '-10px 0 15px -3px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.05)',
'l-xl': '-20px 0 25px -5px rgba(0, 0, 0, 0.1), 10px 0 10px -5px rgba(0, 0, 0, 0.04)',
'l-2xl': '-25px 0 50px -12px rgba(0, 0, 0, 0.25)',
'l-3xl': '-35px 0 60px -15px rgba(0, 0, 0, 0.3)',
'r-sm': '1px 0 2px 0 rgba(0, 0, 0, 0.05)',
'r-md': '4px 0 6px -1px rgba(0, 0, 0, 0.1), -2px 0 4px -1px rgba(0, 0, 0, 0.06)',
'r-lg': '10px 0 15px -3px rgba(0, 0, 0, 0.1), -4px 0 6px -2px rgba(0, 0, 0, 0.05)',
'r-xl': '20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04)',
'r-2xl': '25px 0 50px -12px rgba(0, 0, 0, 0.25)',
'r-3xl': '35px 0 60px -15px rgba(0, 0, 0, 0.3)',
'all-sm': '0 0 2px 0 rgba(0, 0, 0, 0.05)',
'all-md': '0 0 6px -1px rgba(0, 0, 0, 0.1), 0 0 4px -1px rgba(0, 0, 0, 0.06)',
'all-lg': '0 0 15px -3px rgba(0, 0, 0, 0.1), 0 0 6px -2px rgba(0, 0, 0, 0.05)',
'all-xl': '0 0 25px -5px rgba(0, 0, 0, 0.1), 0 0 10px -5px rgba(0, 0, 0, 0.04)',
'all-2xl': '0 0 50px -12px rgba(0, 0, 0, 0.25)',
'all-3xl': '0 0 60px -15px rgba(0, 0, 0, 0.3)'
},
extend: {
fontFamily: {
nunitoSansExtraBold: "NunitoSans-ExtraBold",
nunitoSansLight: "NunitoSans-Light",
nunitoSansSemiBold: "NunitoSans-SemiBold",
},
},
variants: {
extend: {
backgroundImage: ["dark"],
},
},
},
plugins: [
require("daisyui"),
],
}