trevorneidotcom/tailwind.config.js at main · trevornei/trevorneidotcom · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      dropShadow: {
        "white-sm": "0 1px 1px rgba(255, 255, 255, 0.1)",
        "white-md": "0 4px 3px rgba(255, 255, 255, 0.1)",
        "white-lg": "0 10px 8px rgba(255, 255, 255, 0.1)",
        "white-xl": "0 20px 15px rgba(255, 255, 255, 0.1)",
        "white-2xl": "0 25px 25px rgba(255, 255, 255, 0.1)",
      },
      rotate: {
        35: "35deg",
        55: "55deg",
      },
      colors: {
        // Text Primary
        tp: "#9cfcc0",
        // Text Secondary
        ts: "#56966e",
        // Text Pink
        tpink: "#d44179",
        // Background Light Green
        bgdg: "#0b1a17",
      },
      fontFamily: {
        chakra: ["chakra", "sans-serif"],
        silkscreen: ["silkscreen", "sans-serif"],
        rubikglitch: ["Rubik Glitch", "sans-serif"],
      },
      animation: {
        // Existing
        "spin-slow": "spin 5s ease infinite",
        "spin-slow-md": "spin 8s ease-in-out infinite",
        "spin-slow-kinda": "spin 3s ease infinite",

        // New Animations
        "pulse-fast": "pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
        "pulse-once": "grow 1.5s cubic-bezier(0.4, 0, 0.6, 1) 0",
        "pulse-slow": "pulse 4s ease-in-out infinite",
        "bounce-slow": "bounce 4s infinite",
        "slide-right": "slideRight 8s ease-in-out infinite",
        "zoom-in": "zoomIn 2s ease-in-out forwards",
        "fade-in": "fadeIn 2.5s ease-out forwards",
        wiggle: "wiggle 1.5s ease-in-out infinite",
        "rotate-y": "rotateY 3s ease infinite",
        tilt: "tilt 3s ease-in-out infinite",
        shake: "shake 1s ease-in-out infinite",
        rotateAndScale: "rotateAndScale 9s linear infinite",
        rotateAndScale7s: "rotateAndScale 15s linear infinite",
      },
      keyframes: {
        slideRight: {
          "0%": { transform: "translateX(0)" },
          "50%": { transform: "translateX(100%)" },
          "100%": { transform: "translateX(0)" },
        },
        zoomIn: {
          "0%": { transform: "scale(0.5)", opacity: "0" },
          "100%": { transform: "scale(1)", opacity: "1" },
        },
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        wiggle: {
          "0%, 100%": { transform: "rotate(-3deg)" },
          "50%": { transform: "rotate(3deg)" },
        },
        rotateY: {
          "0%": { transform: "rotateY(0deg)" },
          "100%": { transform: "rotateY(360deg)" },
        },
        tilt: {
          "0%, 100%": { transform: "rotate(-2deg)" },
          "50%": { transform: "rotate(2deg)" },
        },
        shake: {
          "0%, 100%": { transform: "translateX(0)" },
          "25%": { transform: "translateX(-5px)" },
          "75%": { transform: "translateX(5px)" },
        },
        rotateAndScale: {
          "0%": { transform: "rotate(0deg) scale(1)" },
          "5%": { transform: "rotate(18deg) scale(1.2)" },
          "10%": { transform: "rotate(36deg) scale(1.5)" },
          "15%": { transform: "rotate(54deg) scale(1.3)" },
          "20%": { transform: "rotate(72deg) scale(1.1)" },
          "25%": { transform: "rotate(90deg) scale(1)" },
          "30%": { transform: "rotate(108deg) scale(1.2)" },
          "35%": { transform: "rotate(126deg) scale(1.5)" },
          "40%": { transform: "rotate(144deg) scale(1.3)" },
          "45%": { transform: "rotate(162deg) scale(1.1)" },
          "50%": { transform: "rotate(180deg) scale(1)" },
          "55%": { transform: "rotate(198deg) scale(1.2)" },
          "60%": { transform: "rotate(216deg) scale(1.5)" },
          "65%": { transform: "rotate(234deg) scale(1.3)" },
          "70%": { transform: "rotate(252deg) scale(1.1)" },
          "75%": { transform: "rotate(270deg) scale(1)" },
          "80%": { transform: "rotate(288deg) scale(1.2)" },
          "85%": { transform: "rotate(306deg) scale(1.5)" },
          "90%": { transform: "rotate(324deg) scale(1.3)" },
          "95%": { transform: "rotate(342deg) scale(1.1)" },
          "100%": { transform: "rotate(360deg) scale(1)" },
        },
      },
    },
  },
};