-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathtailwind.config.js
98 lines (91 loc) · 2.88 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
const defaultTheme = require("tailwindcss/defaultTheme")
const defaultVariants = require("./tailwind-variants")
module.exports = {
purge: [
"./public/**/*.html",
"./src/**/*.js",
],
theme: {
extend: {
boxShadow: {
"hero-sm": "0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"hero": "0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
"hero-md": "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
"hero-lg": "0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
"hero-xl": "0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"hero-2xl": "0 0 0 1px rgba(0, 0, 0, 0.05), 0 25px 50px -12px rgba(0, 0, 0, 0.25)",
},
colors: {
// https://gist.github.com/codex-zaydek/d3d1803f981fc8ed75fc0e4f481f6ecc
"md-blue-50": "#e3f2fd",
"md-blue-100": "#bbdefb",
"md-blue-200": "#90caf9",
"md-blue-300": "#64b5f6",
"md-blue-400": "#42a5f5",
"md-blue-500": "#2196f3",
"md-blue-600": "#1e88e5",
"md-blue-700": "#1976d2",
"md-blue-800": "#1565c0",
"md-blue-900": "#0d47a1",
"md-blue-a100": "#82b1ff",
"md-blue-a200": "#448aff",
"md-blue-a400": "#2979ff",
"md-blue-a700": "#2962ff",
"gh-gray": "#24292e",
"tw-blue": "#1da1f2",
},
fontFamily: {
sans: [
"-apple-system",
"BlinkMacSystemFont",
"Inter",
...defaultTheme.fontFamily.sans,
],
},
opacity: {
90: "0.90",
95: "0.95",
},
// https://youtube.com/watch?v=jl_tdhBxc_Y
spacing: {
"2/1": "200%",
"16/9": "177.7778%",
"16/10": "160%",
"3/2": "150%",
"4/3": "133.3333%",
"5/4": "125%",
"1/1": "100%",
"4/5": "80%",
"3/4": "75%",
"2/3": "66.6667%",
"10/16": "62.5%",
"9/16": "56.25%",
"1/2": "50%",
},
},
screens: {
xs: `${24 + 512 + 24}px`,
// => @media (min-width: 560px) { ... }
sm: `${24 + 640 + 24}px`,
// => @media (min-width: 688px) { ... }
md: `${24 + 768 + 24}px`,
// => @media (min-width: 816px) { ... }
lg: `${24 + 1024 + 24}px`,
// => @media (min-width: 1072px) { ... }
xl: `${24 + 1280 + 24}px`,
// => @media (min-width: 1328px) { ... }
dark: { raw: "(prefers-color-scheme: dark)" },
// => @media (prefers-color-scheme: dark) { ... }
},
},
variants: {
...defaultVariants,
backgroundColor: [...defaultVariants.backgroundColor, "active", "group-hover", "group-focus"],
boxShadow: [...defaultVariants.boxShadow, "active", "group-hover", "group-focus"],
opacity: [...defaultVariants.opacity, "active", "group-hover", "group-focus"],
textColor: [...defaultVariants.textColor, "active", "group-hover", "group-focus"],
},
plugins: [
require("@tailwindcss/ui"),
],
}