create gists

assets/tailwind.config.js

@@ -12,7 +12,45 @@ module.exports = {
     "../lib/zoeyscomputer_web/**/*.*ex",
   ],
   theme: {
+    fontSize: {
+      sm: "1rem",
+      base: "1.2rem",
+      xl: "1.45rem",
+      "2xl": "1.563rem",
+      "3xl": "1.953rem",
+      "4xl": "2.441rem",
+      "5xl": "3.052rem",
+    },
+    fontFamily: {
+      sans: ["Iosevka Web", "monospace"],
+    },
     extend: {
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 },
+        },
+        "fade-out": {
+          "0%": { opacity: 1 },
+          "100%": { opacity: 0 },
+        },
+        "zoom-in": {
+          "0%": { transform: "scale(0.95)" },
+          "100%": { transform: "scale(1)" },
+        },
+        "zoom-out": {
+          "0%": { transform: "scale(1)" },
+          "100%": { transform: "scale(0.95)" },
+        },
+      },
+      animation: {
+        "fade-in-0": "fade-in 0.2s ease-in-out",
+        "fade-in": "fade-in 0.3s ease-in-out",
+        "fade-out-0": "fade-out 0.2s ease-in-out",
+        "fade-out": "fade-out 0.3s ease-in-out",
+        "zoom-in-95": "zoom-in 0.2s ease-in-out",
+        "zoom-out-95": "zoom-out 0.2s ease-in-out",
+      },
       colors: {
         brand: "#FD4F00",
       },
@@ -25,6 +63,7 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
+    require("tailwindcss-animate"),
     require("@catppuccin/tailwindcss")({
       prefix: "ctp",
       defaultFlavor: "mocha",