-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.ts
49 lines (45 loc) · 1.4 KB
/
tailwind.config.ts
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
import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";
import colors from "tailwindcss/colors";
import { default as flattenColorPalette } from "tailwindcss/lib/util/flattenColorPalette";
import { Playfair } from "next/font/google";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
fontFamily: {
Playfair: ["Playfair Display", "serif"],
sans: ["ui-sans-serif", "system-ui"],
serif: ["ui-serif", "Georgia"],
mono: ["ui-monospace", "SFMono-Regular"],
},
extend: {
colors: {
"gradient-start": "rgba(17, 16, 16, 0.582)",
"gradient-end": "rgba(12, 8, 24, 0.904)",
gray: {
DEFAULT: "#000",
//1000: "rgba(34, 34, 34, 0.5)",
1000: "rgba(192, 192, 192, 0.3)",
1100: "rgba(192, 192, 192, 1)",
},
},
},
},
plugins: [addVariablesForColors],
};
// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
function addVariablesForColors({ addBase, theme }: any) {
let allColors = flattenColorPalette(theme("colors"));
let newVars = Object.fromEntries(
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);
addBase({
":root": newVars,
});
}
export default config;