-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.cjs
120 lines (117 loc) · 2.45 KB
/
tailwind.config.cjs
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
const config = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
fontFamily: {
'semibold': ['Suisse SemiBold', 'sans-serif'],
'normal': ['Suisse Regular', 'sans-serif']
},
fontSize: {
xxs: '0.625rem',
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
xl: '1.25rem',
'1.5xl': '1.5rem',
'2xl': '1.625rem',
'3xl': '1.75rem',
'3.25xl': '2rem',
'3.5xl': '2.5rem',
'4xl': '2.625rem',
'4.5xl': '3rem',
'5xl': '4.5rem',
},
container: {
center: true,
padding: {
DEFAULT: '1rem',
md: '2rem',
},
},
extend: {
colors: {
// Accent (Orange)
a: {
// Light (Orange Tint)
2: '#FFE7B8',
// Medium (Orange)
5: '#FFD789',
// Dark (Hot Orange)
8: '#FFB321',
},
// Secondary (Green)
s: {
// Light (Green Tint)
2: '#E5F5C2',
// Medium (Green)
5: '#D5EF9A',
// Dark (Hot Green)
8: '#80EA2E',
},
// Tertiary (Red)
t: {
// Light (Red Tint)
2: '#F9CED5',
// Medium (Red)
5: '#F5ADBA',
// Dark (Hot Red)
8: '#FF5170',
},
// Quaternary (Blue)
q: {
// Light (Blue Tint)
2: '#CCF1FF',
// Medium (Blue)
5: '#AFE7FF',
// Dark (Hot Blue)
8: '#27BEFF',
},
// Neutral Light
nl: {
0: '#FFFFFF',
2: '#77748C',
5: '#4E4C5C',
},
// Neutral Dark
nd: {
2: '#323241',
5: '#282834',
8: '#1E1E27',
9: '#14141A',
},
},
opacity: {
8: '.08',
15: '.15',
20: '.20',
40: '.40',
35: '.35',
60: '.60',
65: '.65',
80: '.80',
85: '.85',
90: '.90',
97: '.97',
},
letterSpacing: {
'-0.01': '-0.01em',
'-0.005': '-0.005em',
0.01: '0.01em',
0.02: '0.02em',
0.04: '0.04em',
0.08: '0.08em',
0.1: '0.1em',
0.12: '0.12em',
},
lineHeight: {
120: '1.2',
},
borderRadius: {
xl: '0.625rem', // or 10px
'2xl': '0.75rem', // or 12px
'3xl': '1rem', // or 16px
},
},
},
plugins: [],
};
module.exports = config;