Repository navigation
Expand file tree
/
Copy pathtailwind.config.js
More file actions
123 lines (116 loc) · 2.83 KB
/
Copy pathtailwind.config.js
File metadata and controls
123 lines (116 loc) · 2.83 KB
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
116
117
118
119
120
121
122
123
const colors = require("tailwindcss/colors");
const prefix = "colors";
const generateColorShades = name =>
Array.from({ length: 9 })
.map((_, i) => (i + 1) * 100)
.reduce(
(acc, k) => ({
...acc,
[k]: `var(--${prefix}-${name}-${k})`,
}),
{},
);
const customColors = {
foreground: `var(--${prefix}-foreground)`,
background: `var(--${prefix}-background)`,
secondaryBg: `var(--${prefix}-secondaryBg)`,
gray: generateColorShades("gray"),
pink: generateColorShades("pink"),
blue: generateColorShades("blue"),
yellow: generateColorShades("yellow"),
green: generateColorShades("green"),
red: generateColorShades("red"),
};
const fontStack = [
"Inter",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen-Sans",
"Ubuntu",
"Cantarell",
"Helvetica Neue",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
].join(",");
module.exports = {
purge: ["./src/**/*.{js,ts,jsx,tsx}"],
darkMode: "class", // 'media' or 'class'
theme: {
fontFamily: {
sans: fontStack,
mono: "'Fira Mono', 'Courier New', Courier, monospace",
},
colors: {
transparent: "transparent",
current: "currentColor",
black: colors.black,
white: colors.white,
...customColors,
},
extend: {
minWidth: {
sidebar: "250px",
pageNav: "200px",
"70vw": "70vw",
"80vw": "80vw",
"90vw": "90vw",
"100vw": "100vw",
},
minHeight: {
"70vh": "70vh",
"80vh": "80vh",
"90vh": "90vh",
},
typography: theme => ({
DEFAULT: {
css: {
color: theme("colors.foreground"),
a: {
color: theme("colors.foreground"),
textDecoration: "underline",
"&:hover": {
color: theme("colors.pink.500"),
},
},
h1: {
color: theme("colors.foreground"),
fontWeight: theme("fontWeight.bold"),
},
h2: {
color: theme("colors.foreground"),
fontWeight: theme("fontWeight.bold"),
},
h3: {
color: theme("colors.foreground"),
},
h4: {
color: theme("colors.foreground"),
},
img: {
borderRadius: "10px",
},
code: {
background: "transparent",
color: theme("colors.pink.500"),
fontWeight: theme("fontWeight.normal"),
},
pre: {
code: {
"&::after": {
display: "none",
},
},
},
},
},
}),
},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/typography")],
};