website/tailwind.config.js at dev · LukePercy/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
74
75
76
77
78
79
80
81
82
83
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './content/**/*.{md,mdx}',
    ],
    theme: {
        screens: {
            xsm: '340px',
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
            '2xl': '1536px',
        },
        extend: {
            colors: {
                'autumn-orange': '#f5800b',
            },
            typography: (theme) => ({
                DEFAULT: {
                    css: {
                        color: theme('colors.slate.300'),
                        a: {
                            color: theme('colors.slate.200'),
                            textDecoration: 'underline',
                            textUnderlineOffset: '3px',
                            textDecorationColor: theme('colors.slate.500'),
                            '&:hover': {
                                color: theme('colors.white'),
                                textDecorationColor: theme('colors.slate.200'),
                            },
                        },
                        hr: {
                            borderColor: theme('colors.slate.700'),
                        },
                        strong: {
                            color: theme('colors.white'),
                        },
                        code: {
                            color: theme('colors.slate.200'),
                            backgroundColor: theme('colors.slate.800'),
                            padding: '0.25rem 0.5rem',
                            borderRadius: '0.25rem',
                        },
                        'code::before': { content: '""' },
                        'code::after': { content: '""' },
                        pre: {
                            backgroundColor: theme('colors.slate.800'),
                            borderColor: theme('colors.slate.700'),
                            borderWidth: '1px',
                        },
                        blockquote: {
                            color: theme('colors.slate.300'),
                            borderLeftColor: theme('colors.autumn-orange'),
                        },
                        'h1, h2, h3, h4, h5, h6': {
                            color: theme('colors.white'),
                        },
                        figcaption: {
                            color: theme('colors.slate.400'),
                        },
                        'ul > li::marker': {
                            color: theme('colors.slate.500'),
                        },
                        'ol > li::marker': {
                            color: theme('colors.slate.500'),
                        },
                    },
                },
            }),
            transitionDuration: {
                0: '0ms',
                2000: '2000ms',
                4000: '4000ms',
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [require('@tailwindcss/typography')],
};