website/tailwind.config.js at dev · auth-blur/website · 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
const colors = {
    primary: {
        500: "#A4463F",
        400: "#F15137",
        300: "#F86F64",
        200: "#FF8278",
        100: "#FBA29B",
        light: "#FED4D0",
    },
    secondary: {
        500: "#933759",
        400: "#EA226C",
        300: "#FD5392",
        200: "#FF8AB5",
        100: "#FFA6C7",
    },
    alt: {
        500: "#FFFFFF",
        400: "#FBA29B",
        300: "#FED4D0",
        200: "#FFFFFF",
        100: "#FFFFFF",
    },
}

const colorWhiteList = Object.entries(colors)
    .map(([key, val]) => [
        ...Object.keys(val).map((c) => `bg-${key}-${c}`),
        ...Object.keys(val).map((c) => `text-${key}-${c}`),
    ])
    .reduce((a, b) => [...a, ...b]);

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
        defaultLineHeights: true,
        standardFontWeights: true,
    },
    purge: {
        content: [
            "./components/**/*.js",
            "./layouts/**/*.js",
            "./pages/**/*.js",
        ],
        options: {
            tailwind: true,
            whitelist: [
                ...colorWhiteList,
                "bg-white",
                "text-white"
            ]
        }
    },
    theme: {
        fontFamily: {
            display: ["Inter", "sans-serif"],
        },
        borderRadius: {
            none: "0",
            sm: "0.25rem",
            default: "1rem",
            md: "0.5rem",
            lg: "0.75rem",
            full: "9999px",
        },
        extend: {
            colors,
        },
    },
    variants: {},
    plugins: [],
}