developer-docs/tailwind.config.cjs at main · worldcoin/developer-docs · 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
const defaultTheme = require("tailwindcss/defaultTheme");

const gridTemplates = {
  "1fr/auto": "1fr auto",
  "auto/1fr": "auto 1fr",
  "auto/1fr/auto": "auto 1fr auto",
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{md,mdx,js,mjs,jsx,ts,tsx}"],
  darkMode: "class",

  theme: {
    fontSize: {
      "3xs": ["0.625rem", { lineHeight: "1rem" }],
      "2xs": ["0.75rem", { lineHeight: "1.25rem" }],
      xs: ["0.8125rem", { lineHeight: "1.5rem" }],
      sm: ["0.875rem", { lineHeight: "1.5rem" }],
      base: ["1rem", { lineHeight: "1.75rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
      "5xl": ["3rem", { lineHeight: "1" }],
      "6xl": ["3.75rem", { lineHeight: "1" }],
      "7xl": ["4.5rem", { lineHeight: "1" }],
      "8xl": ["6rem", { lineHeight: "1" }],
      "9xl": ["8rem", { lineHeight: "1" }],
    },

    extend: {
      aspectRatio: {
        card: "394 / 226",
      },
      spacing: {
        4.5: "calc(4.5 * 1rem / 4)",
      },

      gridTemplateColumns: gridTemplates,
      gridTemplateRows: gridTemplates,

      colors: {
        primary: "#007CFB",
        gray: {
          A1: "#2D2C2C",
          A2: "#373635",
          A3: "#424140",
          A5: "#575654",
          A6: "#E1DFDA",
          A7: "#E7E5E2",
          A8: "#EDECE9",
          A9: "#F3F2F0",
          A10: "#F9F9F8",
          AG1: "#75726F",
          AG2: "#9D9B96",
          25: "#FBFBFC",
          50: "#F9FAFB",
          100: "#F3F4F5",
          200: "#EBECEF",
          300: "#D6D9DD",
          400: "#9BA3AE",
          500: "#657080",
          700: "#3C424B",
          900: "#191C20",
        },
        "world-blue": "#007CFB",
        "warm-red": "#FC5E1B",
        "warm-yellow": "#F5A623",
        orange: "#FD7035",
        accents: {
          info: {
            700: "#506DFF",
          },
        },
      },

      boxShadow: {
        card: "0px 10px 30px rgba(180 180 180 / 0.24)",
        glow: "0 0 4px rgb(0 0 0 / 0.1)",
        toggle: "0px 4px 6px -2px #191C2008, 0px 12px 16px -4px #191C2014",
      },

      maxWidth: {
        lg: "33rem",
        "2xl": "40rem",
        "3xl": "50rem",
        "5xl": "66rem",
      },

      fontFamily: {
        sans: ['"World Pro MVP"', ...defaultTheme.fontFamily.sans],
      },

      fontWeight: {
        light: "300",
        normal: "300",
        regular: "300",
        middle: "450",
        semibold: "450",
        bold: "450",
        extrabold: "450",
        black: "450",
      },

      opacity: {
        1: "0.01",
        2.5: "0.025",
        7.5: "0.075",
        15: "0.15",
      },
      /**
       * If you want to customize @tailwindcss/typography, add options here:
       * typography: { DEFAULT: { css: { ... } } }
       */
    },
  },
  plugins: [require("@tailwindcss/typography")],
};