-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.js
166 lines (164 loc) · 4.75 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
import { fontFamily } from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
const config = {
darkMode: ["class"],
content: [
"./src/**/*.{html,js,svelte,ts}",
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite-svelte-blocks/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite/**/*.js',
],
plugins: [
require('@tailwindcss/forms'),
require('flowbite/plugin'),
],
safelist: ["dark"],
theme: {
fontSize: {
xs: '0.55rem',
sm: '0.7777rem',
md: '1.11rem',
base: '1rem',
lg: '1.333rem',
xl: '1.414rem',
'2xl': '1.999rem',
'3xl': '2.827rem',
'4xl': '3.997rem',
'5xl': '5.652rem',
},
fontFamily: {
heading: 'Nunito',
body: 'Lora',
'inter': ['Inter', 'sans-serif'],
},
fontWeight: {
normal: '400',
bold: '700',
medium: '500',
},
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px"
}
},
extend: {
colors: {
border: "hsl(var(--border) / <alpha-value>)",
input: "hsl(var(--input) / <alpha-value>)",
ring: "hsl(var(--ring) / <alpha-value>)",
background: {
50: 'var(--background-50)',
100: 'var(--background-100)',
200: 'var(--background-200)',
300: 'var(--background-300)',
400: 'var(--background-400)',
500: 'var(--background-500)',
600: 'var(--background-600)',
700: 'var(--background-700)',
800: 'var(--background-800)',
900: 'var(--background-900)',
950: 'var(--background-950)',
},
foreground: "hsl(var(--foreground) / <alpha-value>)",
primary: {
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
50: 'var(--primary-50)',
100: 'var(--primary-100)',
200: 'var(--primary-200)',
300: 'var(--primary-300)',
400: 'var(--primary-400)',
500: 'var(--primary-500)',
600: 'var(--primary-600)',
700: 'var(--primary-700)',
800: 'var(--primary-800)',
900: 'var(--primary-900)',
950: 'var(--primary-950)',
},
secondary: {
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
50: 'var(--secondary-50)',
100: 'var(--secondary-100)',
200: 'var(--secondary-200)',
300: 'var(--secondary-300)',
400: 'var(--secondary-400)',
500: 'var(--secondary-500)',
600: 'var(--secondary-600)',
700: 'var(--secondary-700)',
800: 'var(--secondary-800)',
900: 'var(--secondary-900)',
950: 'var(--secondary-950)',
},
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
},
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
},
accent: {
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
50: 'var(--accent-50)',
100: 'var(--accent-100)',
200: 'var(--accent-200)',
300: 'var(--accent-300)',
400: 'var(--accent-400)',
500: 'var(--accent-500)',
600: 'var(--accent-600)',
700: 'var(--accent-700)',
800: 'var(--accent-800)',
900: 'var(--accent-900)',
950: 'var(--accent-950)',
},
popover: {
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
},
card: {
DEFAULT: "hsl(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
},
'text': {
50: 'var(--text-50)',
100: 'var(--text-100)',
200: 'var(--text-200)',
300: 'var(--text-300)',
400: 'var(--text-400)',
500: 'var(--text-500)',
600: 'var(--text-600)',
700: 'var(--text-700)',
800: 'var(--text-800)',
900: 'var(--text-900)',
950: 'var(--text-950)',
},
magnum: {
'50': '#fff9ed',
'100': '#fef2d6',
'200': '#fce0ac',
'300': '#f9c978',
'400': '#f7b155',
'500': '#f38d1c',
'600': '#e47312',
'700': '#bd5711',
'800': '#964516',
'900': '#793a15',
'950': '#411c09',
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)"
},
fontFamily: {
sans: [...fontFamily.sans]
}
}
},
};
export default config;