/
tailwind.config.js
151 lines (149 loc) · 4.17 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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
const plugin = require("tailwindcss/plugin");
const kit = require("@fission-suite/kit");
module.exports = {
mode: "jit",
darkMode: "media",
purge: ["./src/**/*.{html,md,njk}", ...kit.tailwindPurgeList()],
theme: {
fontFamily: kit.fonts,
extend: {
animation: {
rotateAnimation: "rotateAnimation 30s linear infinite",
},
backgroundImage: {
"purple-fade":
"linear-gradient(360deg, rgba(100, 70, 250, 0) 10.03%, rgba(100, 70, 250, 0.04) 32.78%, rgba(100, 70, 250, 0.08) 51.82%, rgba(100, 70, 250, 0.12) 70.86%, rgba(100, 70, 250, 0.16) 84.79%, rgba(100, 70, 250, 0.2) 99.18%);",
},
colors: {
newneutral: {
0: "#fcfcfd",
100: "#eeeef5",
200: "#c8c8d4",
300: "#a3a3b3",
400: "#808094",
500: "#5e5f76",
600: "#3e3f59",
700: "#1f223d",
800: "#17172b",
},
pink: {
100: "#ffdbe2",
200: "#ffadb8",
300: "#ff8697",
400: "#fd5375",
500: "#fa2e55",
600: "#ec1345",
},
purple: {
100: "#e0deff",
200: "#c0baff",
300: "#a195ff",
400: "#836fff",
500: "#6446fa",
600: "#523ee5",
},
yellow: {
100: "#fff0ad",
200: "#f9dd90",
300: "#f2ca74",
400: "#eab757",
},
red: {
100: "#ffbdc8",
200: "#ff9c9f",
300: "#fd7977",
400: "#f65555",
},
green: {
100: "#a1e2c1",
200: "#82d1a6",
300: "#61c18c",
400: "#3bb073",
},
},
fontFamily: {
display: ["PPFragment"],
sans: ["UncutSans"],
},
fontSize: {
"heading-2xl": [
"3.052rem",
{ lineHeight: "120%", letterSpacing: "-0.01em" },
],
"heading-xl": [
"2.441rem",
{ lineHeight: "120%", letterSpacing: "-0.01em" },
],
"heading-lg": [
"1.953rem",
{ lineHeight: "120%", letterSpacing: "-0.01em" },
],
"heading-base": [
"1.563rem",
{ lineHeight: "120%", letterSpacing: "-0.01em" },
],
"heading-sm": [
"1.5rem",
{ lineHeight: "120%", letterSpacing: "-0.01em" },
],
"heading-xs": [
"1rem",
{ lineHeight: "120%", letterSpacing: "-0.01em" },
],
"body-3xl": ["1.602rem", { lineHeight: "130%" }],
"body-2xl": ["1.424rem", { lineHeight: "130%" }],
"body-xl": ["1.25rem", { lineHeight: "130%" }],
"body-lg": ["1.1rem", { lineHeight: "130%" }],
"body-base": ["1rem", { lineHeight: "130%" }],
"body-sm": [".889rem", { lineHeight: "130%" }],
"body-xs": ["0.79rem", { lineHeight: "130%" }],
"body-2xs": ["0.702rem", { lineHeight: "130%" }],
"body-3xs": ["0.602rem", { lineHeight: "130%" }],
"button-xl": ["1.25rem", { lineHeight: "100%" }],
"button-lg": ["1.1rem", { lineHeight: "100%" }],
"button-base": ["1rem", { lineHeight: "100%" }],
"button-sm": [".889rem", { lineHeight: "100%" }],
"button-xs": ["0.79rem", { lineHeight: "100%" }],
},
keyframes: {
rotateAnimation: {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
},
},
zIndex: {
max: "1000",
},
borderWidth: {
DEFAULT: "1.4px",
},
borderRadius: {
none: "0",
xs: "0.5rem",
sm: "0.7rem",
},
screens: {
xl: "1352px",
xlpadded: "1422px",
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme("colors.newneutral.600"),
},
},
}),
},
},
plugins: [
require("daisyui"),
plugin(function ({ addBase }) {
// this `fontsPath` will be the relative path
// to the fonts from the generated stylesheet
kit.fontFaces({ fontsPath: "./fonts/" }).forEach((fontFace) => {
addBase({ "@font-face": fontFace });
});
}),
require("@tailwindcss/typography"),
],
};