portfolio-site/tailwind.config.js at main · adamlobler/portfolio-site · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      white: "#ffffff",
      black: "#000000",
      gray: {
        50: "#F0F1F3",
        100: "#E0E1E7",
        200: "#C1C3CE",
        300: "#A2A5B6",
        400: "#83879D",
        500: "#646985",
        600: "#4B4F64",
        700: "#323543",
        800: "#191A21",
        900: "#0A0B0D",
      },
      primary: {
        50: "#EEEAFE",
        100: "#DCD5FB",
        200: "#BAABF8",
        300: "#9780F4",
        400: "#7556F1",
        500: "#522CED",
        600: "#3E21B2",
        700: "#291677",
        800: "#150B3B",
        900: "#080418",
      },
    },
    fontSize: {
      oveline: ["10px", { lineHeight: "1rem", fontWeight: 600 }],
      caption: ["12px", { lineHeight: "1.25rem", fontWeight: 500 }],
      button: ["14px", { lineHeight: "1.5rem", fontWeight: 500, letterSpacing:'0.3px' }],
      body2: ["14px", { lineHeight: "1.75rem", fontWeight: 600 }],
      body1: ["18px", { lineHeight: "1.8rem", fontWeight: 400, letterSpacing:'0.3px' }],
      subtitle2: ["18px", { lineHeight: "1.7rem", fontWeight: 400,  letterSpacing:'0.3px' }],
      subtitle1: ["20px", { lineHeight: "2rem", fontWeight: 400, letterSpacing:'0.4px' }],
      h6: ["24px", { lineHeight: "1.2rem", fontWeight: 600 }],
      h5: ["34px", { lineHeight: "1.2", fontWeight: 700 }],
      h4: ["38px", { lineHeight: "1.2", fontWeight: 700 }],
      h3: ["40px", { lineHeight: "1.2", fontWeight: 700 }],
      h2: ["48px", { lineHeight: "1.2", fontWeight: 700 }],
      h1: ["84px", { lineHeight: "1.2", fontWeight: 700 }],
    },
    extend: {
      maxWidth: {
        "7xl": "1344px",
      },
      fontFamily: {
        inter: ["Inter"],
        sans: [
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          '"Segoe UI"',
          "Roboto",
          '"Helvetica Neue"',
          "Arial",
          '"Noto Sans"',
          "sans-serif",
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
        serif: [
          "Inter",
          "ui-serif",
          "Georgia",
          "Cambria",
          '"Times New Roman"',
          "Times",
          "serif",
        ],
        mono: [
          "Inter",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Monaco",
          "Consolas",
          '"Liberation Mono"',
          '"Courier New"',
          "monospace",
        ],
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};