-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
111 lines (109 loc) · 3.61 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
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",],
theme: {
screens: {
sm: "576px",
md: "688px",
lg: "1170px",
xl: "1350px",
},
fontSize: {
"5xxl": "3.5rem",
xs: ".75rem",
xxs: ".625rem",
sm: ".875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"4xxl": "2.5rem",
"5xl": "3rem",
"6xl": "4rem",
"7xl": "4.5rem",
"7xxl": "5rem",
},
letterSpacing: {
tightest: "-.075em",
tighter: "-.05em",
tight: "-.025em",
normal: "0",
wide: ".025em",
wider: ".05em",
widest: ".25em",
largest: ".75em",
},
extend: {
fontFamily: {
sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
inter: ["Inter", ...defaultTheme.fontFamily.sans],
lato: "'Lato', sans-serif",
montserrat: "'Montserrat', sans-serif",
},
colors: {
themeLightWhite: "#1B2631",
themeRgbaColor: "rgba(255, 255, 255, 0.7)",
themeRgbaColorTwo: "rgba(255, 255, 255, 0.2)",
themeGraylight: "#6B7280",
themBlack: "#18181B",
themWhite: "#F1F5F9",
themeGray: "#64748B",
thmeBlackLight: "#1F2937",
themeLightGray: "#F4F7FB",
themeDark: "#2E4053",
orangeOne: "#FFAB90",
orangeTwo: "#FF4307",
blueOne: "#75B1FF",
blueTwo: "#056BF1",
purpleLight: "#B593FF",
purpleDark: "#6726F2",
primaryGreen: "#4AAD4E",
greenLight: "#67E5A3",
greenDark: "#08994D",
yellowLight: "#FFD470",
yellowDark: "#FB9600",
redLight: "#FF7E85",
redDark: "#FF2632",
themeNevyLight: "#5D6D7E",
themeRedLight: "#DE0404",
},
boxShadow: {
dropShadowXs: "0px 1px 1px rgba(24, 24, 27, 0.03), 0px 2px 4px rgba(24, 24, 27, 0.06)",
dropShadowSm: " 0px 2px 3px rgba(24, 24, 27, 0.02), 0px 4px 8px rgba(24, 24, 27, 0.06)",
dropShadowMd: "0px 2px 4px rgba(24, 24, 27, 0.03), 0px 6px 12px rgba(24, 24, 27, 0.08)",
dropShadowLg: "0px 8px 16px rgba(24, 24, 27, 0.08)",
dropShadowXl: "0px 12px 24px rgba(24, 24, 27, 0.08)",
dropShadow2xl: "0px 24px 48px rgba(24, 24, 27, 0.12)",
"3xl": "0px 4px 16px -2px rgba(5, 107, 241, 0.5)",
"4xl": "0px 4px 16px -2px rgba(255, 67, 7, 0.5)",
purple: "0px 4px 16px -2px rgba(103, 38, 242, 0.5)",
green: "0px 4px 16px -2px rgba(4, 174, 84, 0.5)",
yellow: "0px 4px 16px -2px rgba(255, 179, 0, 0.5)",
red: "0px 4px 16px -2px rgba(250, 79, 88, 0.5)",
grayLight: "0px 40px 50px #E7ECF3",
lightGray: "0px 5px 4px -2px #E7ECF3",
darkLight: " 0px 24px 24px -4px rgba(0, 0, 0, 0.2)",
secondaryTemplate: "0px 4px 16px -2px rgba(0, 0, 0, 0.3)",
secondaryGrayLight: "0px 40px 50px -12px #E7ECF3, inset 3px 0px 0px #068179",
},
animation: {
"testimonial-xl": "moveTestimonialShow 4s linear infinite",
"testimonial-lg": "moveTestimonialShow 6s linear infinite",
"testimonial-sm": "moveTestimonialShow 8s linear infinite",
"testimonial-xs": "moveTestimonialShow 10s linear infinite",
},
keyframes: {
moveTestimonialShow: {
"100%": {transform: "translateY(-40%)"},
},
},
transform: {
moveTestimonialShow: {transform: "translate3d(0, 0, 0)"},
},
},
plugins: [],
},
};