notes/tailwind.config.js at main · hyperlink-academy/notes · 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
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./mdx-components.tsx",
    "./notes/*.mdx",
  ],
  darkMode: false,

  theme: {
    borderRadius: {
      none: "0",
      md: "0.25rem",
      lg: "0.375rem",
      full: "9999px",
    },

    colors: {
      "bg-drawer": "#FDFCFA",
      inherit: "inherit",
      transparent: "transparent",
      current: "currentColor",
      background: "floralwhite",
      //JUST A BUNCH OF GRAYS. # refers to lightness value. 95 = lightest, 15 = darkest

      "grey-15": "#272727",
      "grey-35": "#595959",
      "grey-55": "#8C8C8C",
      "grey-80": "#CCCCCC",
      "grey-90": "#E6E6E6",
      white: "#FFFFFF",

      //ACCENT COLORS
      "accent-blue": "#0000FF", //blue
      "accent-red": "#DC143C", //crimson
      "accent-gold": "#FFD700", //gold

      //BG COLORS
      "bg-blue": "#F0F7FA",

      //DO NOT USE IN PRODUCTION. Test colors to aid development, ie, setting bg color on element to see edges of div. DO. NOT. USE. IN. PRODUCTION
      "test-pink": "#E18181",
      "test-blue": "#48D1EF",
    },

    extend: {
      boxShadow: {
        inset: "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
        drop: "0px 2px 3px rgba(0, 0, 0, 0.25), 0px 0.25px 6px rgba(0, 0, 0, 0.15);",
      },
    },
  },

  fontSize: {
    xs: ".75rem",
    sm: ".875rem",
    base: "1rem",
    lg: "1.25rem",
    xl: "1.625rem",
    "2xl": "2rem",
  },

  variants: {
    extend: {},
  },
  plugins: [],
};