nextportfolio/tailwind.config.js at main · AlexisKenAlvarez/nextportfolio · 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
/** @type {import('tailwindcss').Config} */
module.exports = {

  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        'quicksand': ['Quicksand'],
        'raleway': ['Raleway'],
        'courier': ['Courier Prime'],
        'kanit': ['Kanit'],
        'roboto': ['Roboto Mono'],
        'poppins': ['Poppins']
      },
      boxShadow: {
        'forBox': 'rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px',

        'dark': 'rgba(0, 0, 0, 0.35) 0px 5px 15px'

      },
      colors: {
        'mygreen': '#588F62',
        'lightg': '#5AE676',
        'db': '#151522',
        'grey': '#7d7d7d',
        'darkgrey': '#4f4f4f',
        'darkwhite': '#cecece',
        'darkerwhite': '#CCCCCC',
        'notSoBlack': '#515151',
        'lightBorder': '#929090',
        'footerBlack': "#0C0C0C",
        'projgrey': '#F8F8F8',
        'myBlack': '#111111'
      },

      backgroundImage: {
        'topog': "url('https://ik.imagekit.io/efpqj5mis/topog_fMXuZRb_k.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1671535737002')",
        'darktopog': "https://ik.imagekit.io/efpqj5mis/darktopogwebp_89ugekk5R.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1672295291016')",
        'blackTopog': "url('https://ik.imagekit.io/efpqj5mis/darktopogwebp_89ugekk5R.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1672295291016')",

      },

      clipPath: {
        'divider': "polygon(50% 6%, 100% 0%, 100% 100%, 0 100%, 0 0)",
        'underline': "polygon(0 0, 100% 0, 76% 10%, 0 10%);",
        'forButton': 'polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0% 50%)',
        'forMode': 'polygon(100% 0, 100% 79%, 81% 100%, 0 100%, 0 0);'
      },
      gridTemplateColumns: {
        // Simple 16 column grid
       'headerGrid': '0.5fr 1fr',
       'deskH': '7rem, 1fr'
      }
    },
  },
  plugins: [
    require('tailwind-clip-path'),
  ],
}