-
Notifications
You must be signed in to change notification settings - Fork 2
/
tailwind.config.ts
113 lines (103 loc) · 2.98 KB
/
tailwind.config.ts
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
import type { Config } from "tailwindcss";
// helpers for @tailwindcss/typography styles
// see: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
/** @type {(num: number) => string} */
const round = (num: number) =>
num
.toFixed(7)
.replace(/(\.[0-9]+?)0+$/, '$1')
.replace(/\.0$/, '');
/** @type {(px: number) => string} */
// const rem = (px) => `${round(px / 16)}rem`
/** @type {(px: number, base: number) => string} */
const em = (px: number, base: number) => `${round(px / base)}em`;
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
'navy-400': 'rgb(139 159 200)',
'navy-600': 'rgb(34 75 164)',
"light-brown": "#E3E5FF",
"brown-800": "rgb(9 50 139)",
"brown-600": "rgb(227, 229, 255)",
"brown-900": "rgb(233, 223, 238)",
'green-100': '#F8FAFE',
'green-200': '#EEF4FD',
'green-500': '#E9FBFE',
'dark-blue': '#09328b',
'text-blue': '#224ba4',
'green-10': '#E9FBFE',
navy: {
900: '#051E5E',
800: '#082B76',
700: '#09328B',
600: '#224BA4',
500: '#4362A6',
400: '#8B9FC8',
300: '#C5CFE4',
200: '#DEE5F4',
100: '#EEF4FD',
50: '#F8FAFE',
},
gray: {
500: '#4B5563',
400: '#e5e7eb',
},
rosemary: {
900: '#523261',
800: '#734973',
500: '#A284B0',
400: '#B493C4',
300: '#C6ACD2',
200: '#D7C6E0',
100: '#E9DFEE',
50: '#F2ECF5',
},
},
// unfortunately @tailwindcss/typeography doesn't ship types
/** @ts-ignore */
typography: ({ theme }) => ({
// docs: https://tailwindcss.com/docs/typography-plugin#customizing-the-css
// code: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
DEFAULT: {
css: {
h1: {
fontSize: em(54, 16),
marginTop: '0',
marginBottom: em(48, 54),
lineHeight: round(67.5 / 54),
textTransform: 'uppercase',
},
h2: {
fontSize: em(36, 16),
marginTop: em(64, 36),
marginBottom: em(36, 36),
lineHeight: round(48 / 36),
},
'h2:first-child': {
marginTop: 0,
},
h3: {
fontSize: em(20, 16),
marginTop: em(32, 20),
marginBottom: em(12, 20),
lineHeight: round(32 / 20),
},
'h3:first-child': {
marginTop: 0,
},
},
},
}),
primary: "#082B76",
secondary: "#F8FAFE",
},
},
plugins: [],
}
export default config;