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

5 files changed, 38 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/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;