ticker/tailwind.config.js at main · ECEHive/ticker · GitHub

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
/** @type {import('tailwindcss').Config} */
import typography from "@tailwindcss/typography";
import { themeVariants, prefersLight, prefersDark } from "tailwindcss-theme-variants";

const defaultTypograhyStyle = {
    marginTop: ".6em",
    marginBottom: ".25em",
};

export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        fontFamily: {
            sans: ['"Sora"', "sans-serif"],
            serif: ['"Sora"', "serif"],
            body: ['"Sora"', "sans-serif"],
            mono: ['"Azeret Mono"', "monospace"],
        },
        extend: {
            typography: {
                "2xl": {
                    css: {
                        fontSize: "4em",
                        h1: {
                            ...defaultTypograhyStyle,
                            marginBottom: ".2em",
                            lineHeight: "1em",
                        },
                        h2: {
                            ...defaultTypograhyStyle,
                            lineHeight: "1em",
                        },
                        h3: {
                            ...defaultTypograhyStyle,
                            lineHeight: "1em",
                        },
                        h4: {
                            ...defaultTypograhyStyle,
                            lineHeight: "1em",
                        },
                        p: {
                            ...defaultTypograhyStyle,
                            fontSize: "1.275em",
                            lineHeight: "1.2em",
                        },
                        hr: {
                            marginTop: "1em",
                            marginBottom: "1em",
                        },

                        table: {
                            fontSize: "1em",
                            marginBottom: ".8em",
                            marginTop: ".8em",
                        },
                    },
                },
            },
        },
    },
    plugins: [
        typography,
        themeVariants({
            themes: {
                light: {
                    mediaQuery: prefersLight /* "@media (prefers-color-scheme: light)" */,
                },
                dark: {
                    mediaQuery: prefersDark /* "@media (prefers-color-scheme: dark)" */,
                },
            },
        }),
    ],
};