-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.cjs
101 lines (99 loc) · 1.99 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
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable import/no-extraneous-dependencies */
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = {
// main colors
transparent: "transparent",
current: "currentColor",
primary: {
500: "#FF4D67",
400: "#FF7185",
300: "#FF94A4",
200: "#FFB8C2",
100: "#FFEDF0",
},
secondary: {
500: "#FFD300",
400: "#FFDC33",
300: "#FFE566",
200: "#FFED99",
100: "#FFFBE6",
},
// alert & status
success: "#4ADE80",
info: "#246BFD",
warning: "#FACC15",
error: "#F75555",
disabled: "#D8D8D8",
"disabled-button": "#DF485E",
// gray scale
gray: {
blue: "#607D8B",
900: "#212121",
800: "#424242",
700: "#616161",
600: "#757575",
500: "#9E9E9E",
400: "#BDBDBD",
300: "#E0E0E0",
200: "#EEEEEE",
100: "#F5F5F5",
50: "#FAFAFA",
},
// dark colors
dark: {
1: "#181A20",
2: "#1F222A",
3: "#35383F",
},
// others
red: "#F44336",
white: "#FFFFFF",
black: "#000000",
pink: "#E91E63",
purple: "#9C27B0",
"deep-purple": "#673AB7",
indigo: "#3F51B5",
blue: "#2196F3",
"light-blue": "#03A9F4",
cyan: "#00BCD4",
teal: "#009688",
green: "#4CAF50",
"light-green": "#8BC34A",
lime: "#CDDC39",
yellow: "#FFEB3B",
amber: "#FFC107",
orange: "#FF9800",
"deep-orange": "#FF5722",
brown: "#795548",
};
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
colors: {
...colors,
},
// background
backgroundColor: {
red: "#FFF1F3",
purple: "#F4ECFF",
blue: "#F6FAFD",
green: "#F2FFFC",
orange: "#FFF8ED",
pink: "#FFF5F5",
yellow: "#FFFEE0",
...colors,
},
fontFamily: {
urbanist: ["Urbanist", ...defaultTheme.fontFamily.sans],
},
fontWeight: {
bold: 700,
"semi-bold": 600,
medium: 500,
regular: 400,
},
},
plugins: [],
};