refactor: use tailwind.config.ts (#249)

* use tailwind.config.ts

* better type jsdoc

* chore

apps/expo/babel.config.js

@@ -1,3 +1,5 @@
+// FIXME: better type :)
+/** @param {{ cache: (b:boolean) => void }} api */
 module.exports = function (api) {
   api.cache(true);
 

apps/expo/metro.config.js

@@ -1,5 +1,5 @@
 // Learn more: https://docs.expo.dev/guides/monorepos/
-const { getDefaultConfig } = require("expo/metro-config");
+const { getDefaultConfig } = require("@expo/metro-config");
 const path = require("path");
 
 const projectRoot = __dirname;

apps/expo/package.json

@@ -12,6 +12,7 @@
     "FIXME(no-work):type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@expo/metro-config": "^0.7.1",
     "@shopify/flash-list": "1.4.0",
     "@tanstack/react-query": "^4.28.0",
     "@trpc/client": "^10.18.0",
@@ -20,7 +21,7 @@
     "expo": "^48.0.9",
     "expo-constants": "~14.2.1",
     "expo-linking": "~4.0.1",
-    "expo-router": "^1.4.2",
+    "expo-router": "^1.4.3",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
     "nativewind": "^2.0.11",
@@ -32,19 +33,19 @@
     "superjson": "1.9.1"
   },
   "devDependencies": {
-    "@acme/api": "^0.1.0",
-    "@acme/eslint-config": "^0.1.0",
-    "@acme/tailwind-config": "^0.1.0",
+    "@acme/api": "*",
+    "@acme/eslint-config": "*",
+    "@acme/tailwind-config": "*",
     "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
     "@babel/runtime": "^7.21.0",
     "@expo/config-plugins": "^6.0.1",
-    "@types/react": "^18.0.30",
+    "@types/react": "^18.0.31",
     "@types/webpack-env": "^1.18.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.37.0",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5.0.2"
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.3"
   },
   "private": true
 }

apps/expo/tailwind.config.ts

@@ -0,0 +1,8 @@
+import { type Config } from "tailwindcss";
+
+import baseConfig from "@acme/tailwind-config";
+
+export default {
+  presets: [baseConfig],
+  content: ["./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+} satisfies Config;

apps/expo/tsconfig.json

@@ -4,6 +4,6 @@
     "jsx": "react-native",
     "types": ["nativewind/types", "webpack-env"]
   },
-  "include": ["expo-plugins", "src", "app.config.ts", "index.tsx"],
+  "include": ["expo-plugins", "src", "*.ts", "**/*.js", "index.tsx"],
   "exclude": ["node_modules"]
 }

apps/nextjs/next.config.mjs

@@ -2,10 +2,11 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
  * This is especially useful for Docker builds and Linting.
  */
-!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));
+// !process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));
 
 /** @type {import("next").NextConfig} */
 const config = {
+  reactStrictMode: true,
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: ["@acme/api", "@acme/auth", "@acme/db"],
   /** We already do linting and typechecking as separate tasks in CI */

apps/nextjs/package.json

@@ -31,14 +31,14 @@
   },
   "devDependencies": {
     "@acme/eslint-config": "*",
-    "@types/node": "^18.15.10",
-    "@types/react": "^18.0.30",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.14",
     "dotenv-cli": "^7.1.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.37.0",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5.0.2"
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.3"
   }
 }

apps/nextjs/postcss.config.cjs

@@ -1,2 +1,2 @@
-// @ts-ignore
+// @ts-expect-error - No types for postcss
 module.exports = require("@acme/tailwind-config/postcss");

apps/nextjs/src/pages/index.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import type { NextPage } from "next";
 import Head from "next/head";
-import Link from "next/link";
 import { signIn, signOut } from "next-auth/react";
 
 import { api, type RouterOutputs } from "~/utils/api";
@@ -55,7 +54,6 @@ const CreatePostForm: React.FC = () => {
           {error.data.zodError.fieldErrors.title}
         </span>
       )}
-      <Link href="/yoo">Hello</Link>
       <input
         className="mb-2 rounded bg-white/10 p-2 text-white"
         value={content}

apps/nextjs/tailwind.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from "tailwindcss";
+
+import baseConfig from "@acme/tailwind-config";
+
+export default {
+  content: ["./src/**/*.tsx"],
+  presets: [baseConfig],
+} satisfies Config;

package.json

@@ -22,10 +22,10 @@
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
     "@manypkg/cli": "^0.20.0",
     "@types/prettier": "^2.7.2",
-    "eslint": "^8.36.0",
+    "eslint": "^8.37.0",
     "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.5",
-    "turbo": "^1.8.6",
-    "typescript": "^5.0.2"
+    "prettier-plugin-tailwindcss": "^0.2.6",
+    "turbo": "^1.8.8",
+    "typescript": "^5.0.3"
   }
 }

packages/api/package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@acme/eslint-config": "*",
-    "eslint": "^8.36.0",
-    "typescript": "^5.0.2"
+    "eslint": "^8.37.0",
+    "typescript": "^5.0.3"
   }
 }

packages/auth/package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@acme/eslint-config": "*",
-    "eslint": "^8.36.0",
-    "typescript": "^5.0.2"
+    "eslint": "^8.37.0",
+    "typescript": "^5.0.3"
   }
 }

packages/config/eslint/package.json

@@ -13,7 +13,7 @@
     "eslint-plugin-react": "7.32.2"
   },
   "devDependencies": {
-    "eslint": "^8.36.0",
-    "typescript": "^5.0.2"
+    "eslint": "^8.37.0",
+    "typescript": "^5.0.3"
   }
 }

packages/config/tailwind/index.ts

@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [""],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

packages/config/tailwind/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@acme/tailwind-config",
   "version": "0.1.0",
-  "main": "index.js",
+  "main": "index.ts",
   "license": "MIT",
   "files": [
-    "index.js",
+    "index.ts",
     "postcss.js"
   ],
   "devDependencies": {
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.3.1"
   }
 }

packages/db/package.json

@@ -17,6 +17,6 @@
   "devDependencies": {
     "dotenv-cli": "^7.1.0",
     "prisma": "^4.12.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.3"
   }
 }