usaco-guide-next/tailwind.config.js at master · emhgit/usaco-guide-next · 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
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
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/styles/**/*.css",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        boxShadow: {
          xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
          solid: "0 0 0 2px currentColor",
          outline: `0 0 0 3px rgba(156, 163, 175, .5)`,
          "outline-gray": `0 0 0 3px rgba(254, 202, 202, .5)`,
          "outline-blue": `0 0 0 3px rgba(191, 219, 254, .5)`,
          "outline-green": `0 0 0 3px rgba(167, 243, 208, .5)`,
          "outline-yellow": `0 0 0 3px rgba(253, 230, 138, .5)`,
          "outline-red": `0 0 0 3px rgba(254, 202, 202, .5)`,
          "outline-pink": `0 0 0 3px rgba(251, 207, 232, .5)`,
          "outline-purple": `0 0 0 3px rgba(221, 214, 254, .5)`,
          "outline-indigo": `0 0 0 3px rgba(199, 210, 254, .5)`,
        },
        typography: (theme) => ({
          light: {
            css: [
              {
                color: theme("colors.gray.400"),
                '[class~="lead"]': {
                  color: theme("colors.gray.300"),
                },
                a: {
                  color: theme("colors.white"),
                },
                strong: {
                  color: theme("colors.white"),
                },
                "ol > li::before": {
                  color: theme("colors.gray.400"),
                },
                "ul > li::before": {
                  backgroundColor: theme("colors.gray.600"),
                },
                hr: {
                  borderColor: theme("colors.gray.200"),
                },
                blockquote: {
                  color: theme("colors.gray.200"),
                  borderLeftColor: theme("colors.gray.600"),
                },
                h1: {
                  color: theme("colors.white"),
                },
                h2: {
                  color: theme("colors.white"),
                },
                h3: {
                  color: theme("colors.white"),
                },
                h4: {
                  color: theme("colors.white"),
                },
                "figure figcaption": {
                  color: theme("colors.gray.400"),
                },
                code: {
                  color: theme("colors.white"),
                },
                "a code": {
                  color: theme("colors.white"),
                },
                pre: {
                  color: theme("colors.gray.200"),
                  backgroundColor: theme("colors.gray.800"),
                },
                thead: {
                  color: theme("colors.white"),
                  borderBottomColor: theme("colors.gray.400"),
                },
                "tbody tr": {
                  borderBottomColor: theme("colors.gray.600"),
                },
              },
            ],
          },
        }),

        animation: {
          blob1: "blob 9s infinite",
          blob2: "blob 9s infinite 2s",
        },
        keyframes: {
          blob: {
            "0%": {
              transform: "scale(1)",
            },
            "33%": {
              transform: "scale(1.1) translateX(8rem) translateY(3rem)",
            },
            "66%": {
              transform: "scale(0.9) translateX(-8rem) translateY(-3rem)",
            },
            "100%": {
              transform: "scale(1)",
            },
          },
        },
      },
    },
    plugins: [
      require("@tailwindcss/forms"),
      require("@tailwindcss/typography"),
      require("@tailwindcss/aspect-ratio"),
    ],
  },
};