porfolio/tailwind.config.js at main · TheLokin/porfolio · 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
/** @type {import('tailwindcss').Config} */

export default {
  content: ["./src/**/*.{html,md,mdx,js,jsx,astro,ts,tsx,svelte,vue}"],
  theme: {
    extend: {
      fontFamily: {
        sora: ["Sora Variable", "system-ui"],
      },
      colors: {
        primary: "var(--color-primary)",
        secondary: "var(--color-secondary)",
        tertiary: "var(--color-tertiary)",
      },
    },
  },
  plugins: [
    ({ addUtilities, addComponents, addVariant }) => {
      addUtilities({
        ".scrollbar-hide": {
          /* IE and Edge */
          "-ms-overflow-style": "none",

          /* Firefox */
          "scrollbar-width": "none",

          /* Safari and Chrome */
          "&::-webkit-scrollbar": {
            display: "none",
          },
        },
        ".scrollbar-default": {
          /* IE and Edge */
          "-ms-overflow-style": "auto",

          /* Firefox */
          "scrollbar-width": "auto",

          /* Safari and Chrome */
          "&::-webkit-scrollbar": {
            display: "block",
          },
        },
      })
      addComponents({
        /* 48px */
        ".typography-6xl": {
          fontSize: "3rem",
          lineHeight: "3.5rem",
          letterSpacing: "-0.025em",
        },

        /* 40px */
        ".typography-5xl": {
          fontSize: "2.5rem",
          lineHeight: "3rem",
          letterSpacing: "-0.025em",
        },

        /* 36px */
        ".typography-4xl": {
          fontSize: "2.25rem",
          lineHeight: "2.75rem",
          letterSpacing: "-0.025em",
        },

        /* 32px */
        ".typography-3xl": {
          fontSize: "2rem",
          lineHeight: "2.5rem",
          letterSpacing: "-0.025em",
        },

        /* 28px */
        ".typography-2xl": {
          fontSize: "1.75rem",
          lineHeight: "2rem",
          letterSpacing: "-0.025em",
        },

        /* 24px */
        ".typography-xl": {
          fontSize: "1.5rem",
          lineHeight: "1.75rem",
          letterSpacing: "-0.025em",
        },

        /* 20px */
        ".typography-lg": {
          fontSize: "1.25rem",
          lineHeight: "1.5rem",
          letterSpacing: "-0.025em",
        },

        /* 16px */
        ".typography-base": {
          fontSize: "1rem",
          lineHeight: "1.25rem",
          letterSpacing: "-0.025em",
        },

        /* 12px */
        ".typography-sm": {
          fontSize: "0.75rem",
          lineHeight: "1rem",
          letterSpacing: "-0.025em",
        },
      })
      addVariant("any-hover", "@media (any-hover: hover) { &:hover }")
    },
  ],
}