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

5 files changed, 114 insertions, 12 deletions

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/tooling/tailwind/globals.css b/tooling/tailwind/globals.css
new file mode 100644
index 00000000..8abdb15c
--- /dev/null
+++ b/tooling/tailwind/globals.css
@@ -0,0 +1,76 @@
+@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/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;