chore: Refactor tailwind in all apps to use the tooling package

18 files changed, 350 insertions, 427 deletions

diff --git a/apps/browser-extension/tsconfig.json b/apps/browser-extension/tsconfig.json
index 3a88f0af..d1cd8091 100644
--- a/apps/browser-extension/tsconfig.json
+++ b/apps/browser-extension/tsconfig.json
@@ -6,7 +6,6 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
@@ -14,7 +13,6 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
diff --git a/apps/landing/app/layout.tsx b/apps/landing/app/layout.tsx
index ab7f2a50..22f3c6ed 100644
--- a/apps/landing/app/layout.tsx
+++ b/apps/landing/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-import "./globals.css";
+import "@hoarder/tailwind-config/globals.css";
 
 import React from "react";
 
diff --git a/apps/landing/tailwind.config.ts b/apps/landing/tailwind.config.ts
index 521ba51c..1c042f0e 100644
--- a/apps/landing/tailwind.config.ts
+++ b/apps/landing/tailwind.config.ts
@@ -1,89 +1,10 @@
 import type { Config } from "tailwindcss";
 
+import web from "@hoarder/tailwind-config/web";
+
 const config = {
-  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  prefix: "",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        "pulse-border": {
-          "0%, 100%": {
-            "box-shadow": "0 0 0 0 gray",
-          },
-          "50%": {
-            "box-shadow": "0 0 0 2px gray",
-          },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "pulse-border": "pulse-border 1s ease-in-out infinite",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  content: web.content,
+  presets: [web],
 } satisfies Config;
 
 export default config;
diff --git a/apps/mobile/globals.css b/apps/mobile/globals.css
index de1cf559..7d537499 100644
--- a/apps/mobile/globals.css
+++ b/apps/mobile/globals.css
@@ -1,80 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark:root {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import "@hoarder/tailwind-config/globals";
diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts
index fef31daf..9eb1eb4a 100644
--- a/apps/mobile/tailwind.config.ts
+++ b/apps/mobile/tailwind.config.ts
@@ -1,74 +1,10 @@
 import type { Config } from "tailwindcss";
-import { hairlineWidth } from "nativewind/theme";
+import base from "@hoarder/tailwind-config/native";
 
 const config = {
-  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  content: base.content,
   plugins: [],
-  presets: [require("nativewind/preset")],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderWidth: {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
-        hairline: hairlineWidth(),
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
+  presets: [base, require("nativewind/preset")],
 } satisfies Config;
 
 export default config;
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
deleted file mode 100644
index 8abdb15c..00000000
--- a/apps/web/app/globals.css
+++ /dev/null
@@ -1,76 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 395d7297..f5ad19f6 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-import "./globals.css";
+import "@hoarder/tailwind-config/globals.css";
 
 import type { Viewport } from "next";
 import React from "react";
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
index 96e1c19b..74c49ddd 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
@@ -104,7 +104,7 @@ function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
             dangerouslySetInnerHTML={{
               __html: bookmark.content.htmlContent || "",
             }}
-            className="prose dark:prose-invert mx-auto"
+            className="prose mx-auto dark:prose-invert"
           />
         );
       }
@@ -112,7 +112,7 @@ function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
     }
     case "text": {
       content = (
-        <Markdown className="prose dark:prose-invert mx-auto">
+        <Markdown className="prose mx-auto dark:prose-invert">
           {bookmark.content.text}
         </Markdown>
       );
diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 82664390..42d09c23 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -58,7 +58,7 @@ export default function TextCard({
           ),
         )}
       >
-        <Markdown className="prose dark:prose-invert grow overflow-hidden">
+        <Markdown className="prose grow overflow-hidden dark:prose-invert">
           {bookmarkedText.text}
         </Markdown>
         <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden">
diff --git a/apps/web/package.json b/apps/web/package.json
index a81079f5..88692c31 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -58,7 +58,6 @@
     "react-select": "^5.8.0",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4",
     "zustand": "^4.5.1"
   },
@@ -67,7 +66,6 @@
     "@hoarder/prettier-config": "workspace:^0.1.0",
     "@hoarder/tailwind-config": "workspace:^0.1.0",
     "@hoarder/tsconfig": "workspace:^0.1.0",
-    "@tailwindcss/typography": "^0.5.10",
     "@types/emoji-mart": "^3.0.14",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 521ba51c..1c042f0e 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,89 +1,10 @@
 import type { Config } from "tailwindcss";
 
+import web from "@hoarder/tailwind-config/web";
+
 const config = {
-  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  prefix: "",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        "pulse-border": {
-          "0%, 100%": {
-            "box-shadow": "0 0 0 0 gray",
-          },
-          "50%": {
-            "box-shadow": "0 0 0 2px gray",
-          },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "pulse-border": "pulse-border 1s ease-in-out infinite",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  content: web.content,
+  presets: [web],
 } satisfies Config;
 
 export default config;
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 314eab8a..d250afae 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -1,5 +1,4 @@
 {
-  // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": "."
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b87e252..cb3b5f7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -463,9 +463,6 @@ importers:
       tailwind-merge:
         specifier: ^2.2.1
         version: 2.2.1
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.1)
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -485,9 +482,6 @@ importers:
       '@hoarder/tsconfig':
         specifier: workspace:^0.1.0
         version: link:../../tooling/typescript
-      '@tailwindcss/typography':
-        specifier: ^0.5.10
-        version: 0.5.10(tailwindcss@3.4.1)
       '@types/emoji-mart':
         specifier: ^3.0.14
         version: 3.0.14
@@ -833,6 +827,12 @@ importers:
 
   tooling/tailwind:
     dependencies:
+      '@tailwindcss/typography':
+        specifier: ^0.5.10
+        version: 0.5.10(tailwindcss@3.4.1)
+      nativewind:
+        specifier: ^4.0.1
+        version: 4.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1)
       postcss:
         specifier: ^8.4.35
         version: 8.4.35
@@ -12233,6 +12233,15 @@ snapshots:
       '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.9)
     dev: false
 
+  '@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.0)':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.0)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.0)
+    dev: false
+
   '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
@@ -12262,6 +12271,13 @@ snapshots:
       '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.23.9)
     dev: false
 
+  '@babel/plugin-proposal-export-default-from@7.23.3(@babel/core@7.24.0)':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.24.0)
+    dev: false
+
   '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
@@ -12283,6 +12299,13 @@ snapshots:
       '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.9)
     dev: false
 
+  '@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.0)':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.0)
+    dev: false
+
   '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.23.9)':
     dependencies:
       '@babel/compat-data': 7.23.5
@@ -12310,6 +12333,13 @@ snapshots:
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.9)
     dev: false
 
+  '@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.0)':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.0)
+    dev: false
+
   '@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
@@ -12396,6 +12426,12 @@ snapshots:
       '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
+  '@babel/plugin-syntax-export-default-from@7.23.3(@babel/core@7.24.0)':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.0
+    dev: false
+
   '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
@@ -13194,8 +13230,6 @@ snapshots:
     dependencies:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
-    dev: true
-    optional: true
 
   '@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.9)':
     dependencies:
@@ -13207,8 +13241,6 @@ snapshots:
     dependencies:
       '@babel/core': 7.24.0
       '@babel/helper-plugin-utils': 7.24.0
-    dev: true
-    optional: true
 
   '@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9)':
     dependencies:
@@ -16185,6 +16217,14 @@ snapshots:
       - supports-color
     dev: false
 
+  '@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.0(@babel/core@7.24.0))':
+    dependencies:
+      '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - supports-color
+    dev: false
+
   '@react-native/babel-preset@0.73.21(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))':
     dependencies:
       '@babel/core': 7.23.9
@@ -16234,6 +16274,55 @@ snapshots:
       - supports-color
     dev: false
 
+  '@react-native/babel-preset@0.73.21(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-export-default-from': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.0)
+      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.24.0)
+      '@babel/plugin-transform-classes': 7.23.8(@babel/core@7.24.0)
+      '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.0)
+      '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.24.0)
+      '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.0)
+      '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-runtime': 7.24.0(@babel/core@7.24.0)
+      '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.24.0)
+      '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.24.0)
+      '@babel/template': 7.24.0
+      '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.0)
+      react-refresh: 0.14.0
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - supports-color
+    dev: false
+
   '@react-native/codegen@0.73.3(@babel/preset-env@7.24.0(@babel/core@7.23.9))':
     dependencies:
       '@babel/parser': 7.24.0
@@ -16248,6 +16337,20 @@ snapshots:
       - supports-color
     dev: false
 
+  '@react-native/codegen@0.73.3(@babel/preset-env@7.24.0(@babel/core@7.24.0))':
+    dependencies:
+      '@babel/parser': 7.24.0
+      '@babel/preset-env': 7.24.0(@babel/core@7.24.0)
+      flow-parser: 0.206.0
+      glob: 7.2.3
+      invariant: 2.2.4
+      jscodeshift: 0.14.0(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+      mkdirp: 0.5.6
+      nullthrows: 1.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   '@react-native/community-cli-plugin@0.73.16(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))':
     dependencies:
       '@react-native-community/cli-server-api': 12.3.2
@@ -16270,6 +16373,28 @@ snapshots:
       - utf-8-validate
     dev: false
 
+  '@react-native/community-cli-plugin@0.73.16(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))':
+    dependencies:
+      '@react-native-community/cli-server-api': 12.3.2
+      '@react-native-community/cli-tools': 12.3.2
+      '@react-native/dev-middleware': 0.73.7
+      '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+      chalk: 4.1.2
+      execa: 5.1.1
+      metro: 0.80.6
+      metro-config: 0.80.6
+      metro-core: 0.80.6
+      node-fetch: 2.7.0
+      readline: 1.3.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@babel/preset-env'
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   '@react-native/debugger-frontend@0.73.3':
     dev: false
 
@@ -16327,6 +16452,17 @@ snapshots:
       - supports-color
     dev: false
 
+  '@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))':
+    dependencies:
+      '@babel/core': 7.24.0
+      '@react-native/babel-preset': 0.73.21(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+      hermes-parser: 0.15.0
+      nullthrows: 1.1.1
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - supports-color
+    dev: false
+
   '@react-native/normalize-color@2.1.0':
     dev: false
 
@@ -16340,6 +16476,13 @@ snapshots:
       react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0)
     dev: false
 
+  '@react-native/virtualized-lists@0.73.4(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))':
+    dependencies:
+      invariant: 2.2.4
+      nullthrows: 1.1.1
+      react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0)
+    dev: false
+
   '@react-navigation/bottom-tabs@6.5.18(@react-navigation/native@6.1.15(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native-safe-area-context@4.8.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native-screens@3.29.0(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-navigation/elements': 1.3.28(@react-navigation/native@6.1.15(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native-safe-area-context@4.8.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0)
@@ -16816,7 +16959,6 @@ snapshots:
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.1
-    dev: true
 
   '@tanstack/eslint-plugin-query@5.20.1(eslint@8.57.0)(typescript@5.3.3)':
     dependencies:
@@ -18051,6 +18193,18 @@ snapshots:
       - supports-color
     dev: false
 
+  babel-plugin-tester@11.0.4(@babel/core@7.24.0):
+    dependencies:
+      '@babel/core': 7.24.0
+      core-js: 3.36.0
+      debug: 4.3.4
+      lodash.mergewith: 4.6.2
+      prettier: 2.8.8
+      strip-indent: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.23.9):
     dependencies:
       '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9)
@@ -18058,6 +18212,13 @@ snapshots:
       - '@babel/core'
     dev: false
 
+  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.0):
+    dependencies:
+      '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.24.0)
+    transitivePeerDependencies:
+      - '@babel/core'
+    dev: false
+
   babel-preset-expo@10.0.1(@babel/core@7.23.9):
     dependencies:
       '@babel/plugin-proposal-decorators': 7.24.0(@babel/core@7.23.9)
@@ -22054,6 +22215,32 @@ snapshots:
       - supports-color
     dev: false
 
+  jscodeshift@0.14.0(@babel/preset-env@7.24.0(@babel/core@7.24.0)):
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/parser': 7.24.0
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.0)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.0)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.24.0)
+      '@babel/preset-env': 7.24.0(@babel/core@7.24.0)
+      '@babel/preset-flow': 7.24.0(@babel/core@7.24.0)
+      '@babel/preset-typescript': 7.23.3(@babel/core@7.24.0)
+      '@babel/register': 7.23.7(@babel/core@7.24.0)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.24.0)
+      chalk: 4.1.2
+      flow-parser: 0.206.0
+      graceful-fs: 4.2.11
+      micromatch: 4.0.5
+      neo-async: 2.6.2
+      node-dir: 0.1.17
+      recast: 0.21.5
+      temp: 0.8.4
+      write-file-atomic: 2.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   jsdom@24.0.0:
     dependencies:
       cssstyle: 4.0.1
@@ -22365,8 +22552,7 @@ snapshots:
       p-locate: 6.0.0
     dev: false
 
-  lodash.castarray@4.4.0:
-    dev: true
+  lodash.castarray@4.4.0: {}
 
   lodash.debounce@4.0.8:
     dev: false
@@ -22377,8 +22563,7 @@ snapshots:
   lodash.isarguments@3.1.0:
     dev: false
 
-  lodash.isplainobject@4.0.6:
-    dev: true
+  lodash.isplainobject@4.0.6: {}
 
   lodash.memoize@4.1.2:
     dev: false
@@ -23649,6 +23834,20 @@ snapshots:
       - supports-color
     dev: false
 
+  nativewind@4.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1):
+    dependencies:
+      react-native-css-interop: 0.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1)
+      tailwindcss: 3.4.1
+    transitivePeerDependencies:
+      - '@babel/core'
+      - react
+      - react-native
+      - react-native-reanimated
+      - react-native-safe-area-context
+      - react-native-svg
+      - supports-color
+    dev: false
+
   natural-compare@1.4.0: {}
 
   ncp@2.0.0:
@@ -24581,7 +24780,6 @@ snapshots:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   postcss-selector-parser@6.0.15:
     dependencies:
@@ -25135,6 +25333,22 @@ snapshots:
       - supports-color
     dev: false
 
+  react-native-css-interop@0.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0))(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)(tailwindcss@3.4.1):
+    dependencies:
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/traverse': 7.24.0
+      '@babel/types': 7.24.0
+      babel-plugin-tester: 11.0.4(@babel/core@7.24.0)
+      lightningcss: 1.22.0
+      react: 18.2.0
+      react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0)
+      react-native-reanimated: 3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0)
+      tailwindcss: 3.4.1
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: false
+
   react-native-fit-image@1.5.5:
     dependencies:
       prop-types: 15.8.1
@@ -25165,6 +25379,21 @@ snapshots:
       react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0)
     dev: false
 
+  react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@babel/core': 7.24.0
+      '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.24.0)
+      '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.24.0)
+      '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.24.0)
+      '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.24.0)
+      '@babel/preset-typescript': 7.23.3(@babel/core@7.24.0)
+      convert-source-map: 2.0.0
+      invariant: 2.2.4
+      react: 18.2.0
+      react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0)
+    dev: false
+
   react-native-safe-area-context@4.8.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -25237,6 +25466,56 @@ snapshots:
       - utf-8-validate
     dev: false
 
+  react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0):
+    dependencies:
+      '@jest/create-cache-key-function': 29.7.0
+      '@react-native-community/cli': 12.3.2
+      '@react-native-community/cli-platform-android': 12.3.2
+      '@react-native-community/cli-platform-ios': 12.3.2
+      '@react-native/assets-registry': 0.73.1
+      '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+      '@react-native/community-cli-plugin': 0.73.16(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))
+      '@react-native/gradle-plugin': 0.73.4
+      '@react-native/js-polyfills': 0.73.1
+      '@react-native/normalize-colors': 0.73.2
+      '@react-native/virtualized-lists': 0.73.4(react-native@0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0(@babel/core@7.24.0))(react@18.2.0))
+      abort-controller: 3.0.0
+      anser: 1.4.10
+      ansi-regex: 5.0.1
+      base64-js: 1.5.1
+      chalk: 4.1.2
+      deprecated-react-native-prop-types: 5.0.0
+      event-target-shim: 5.0.1
+      flow-enums-runtime: 0.0.6
+      invariant: 2.2.4
+      jest-environment-node: 29.7.0
+      jsc-android: 250231.0.0
+      memoize-one: 5.2.1
+      metro-runtime: 0.80.6
+      metro-source-map: 0.80.6
+      mkdirp: 0.5.6
+      nullthrows: 1.1.1
+      pretty-format: 26.6.2
+      promise: 8.3.0
+      react: 18.2.0
+      react-devtools-core: 4.28.5
+      react-refresh: 0.14.0
+      react-shallow-renderer: 16.15.0(react@18.2.0)
+      regenerator-runtime: 0.13.11
+      scheduler: 0.24.0-canary-efb381bbf-20230505
+      stacktrace-parser: 0.1.10
+      whatwg-fetch: 3.6.20
+      ws: 6.2.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@babel/preset-env'
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   react-refresh@0.13.0:
     dev: true
 
diff --git a/tooling/tailwind/base.ts b/tooling/tailwind/base.ts
index 15fd759a..6316beb2 100644
--- a/tooling/tailwind/base.ts
+++ b/tooling/tailwind/base.ts
@@ -2,8 +2,20 @@ import type { Config } from "tailwindcss";
 
 export default {
   darkMode: ["class"],
-  content: ["src/**/*.{ts,tsx}"],
+  content: [
+    "pages/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "app/**/*.{ts,tsx}",
+    "src/**/*.{ts,tsx}",
+  ],
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       colors: {
         border: "hsl(var(--border))",
diff --git a/apps/landing/app/globals.css b/tooling/tailwind/globals.css
index 8abdb15c..8abdb15c 100644
--- a/apps/landing/app/globals.css
+++ b/tooling/tailwind/globals.css
diff --git a/tooling/tailwind/native.ts b/tooling/tailwind/native.ts
index 7441221e..2ecab671 100644
--- a/tooling/tailwind/native.ts
+++ b/tooling/tailwind/native.ts
@@ -1,9 +1,17 @@
 import type { Config } from "tailwindcss";
+import { hairlineWidth } from "nativewind/theme";
 
 import base from "./base";
 
 export default {
   content: base.content,
   presets: [base],
-  theme: {},
+  theme: {
+    extend: {
+      borderWidth: {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
+        hairline: hairlineWidth(),
+      },
+    },
+  },
 } satisfies Config;
diff --git a/tooling/tailwind/package.json b/tooling/tailwind/package.json
index 9ee573a5..a5f4824f 100644
--- a/tooling/tailwind/package.json
+++ b/tooling/tailwind/package.json
@@ -5,7 +5,8 @@
   "type": "module",
   "exports": {
     "./native": "./native.ts",
-    "./web": "./web.ts"
+    "./web": "./web.ts",
+    "./globals.css": "./globals.css"
   },
   "license": "MIT",
   "scripts": {
@@ -17,7 +18,9 @@
   "dependencies": {
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "nativewind": "^4.0.1"
   },
   "devDependencies": {
     "@hoarder/eslint-config": "workspace:^0.2.0",
diff --git a/tooling/tailwind/web.ts b/tooling/tailwind/web.ts
index 0729477a..a88268ec 100644
--- a/tooling/tailwind/web.ts
+++ b/tooling/tailwind/web.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import typography from "@tailwindcss/typography";
 import animate from "tailwindcss-animate";
 
 import base from "./base";
@@ -7,13 +8,6 @@ export default {
   content: base.content,
   presets: [base],
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
       borderRadius: {
         lg: "var(--radius)",
@@ -29,12 +23,21 @@ export default {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "pulse-border": {
+          "0%, 100%": {
+            "box-shadow": "0 0 0 0 gray",
+          },
+          "50%": {
+            "box-shadow": "0 0 0 2px gray",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-border": "pulse-border 1s ease-in-out infinite",
       },
     },
   },
-  plugins: [animate],
+  plugins: [animate, typography],
 } satisfies Config;