fix(tailwind): TailwindConfig type broken when tailwindcss is not installed (#1740)

Author: gabrielmfern

.changeset/wise-suits-run.md

@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": patch
+---
+
+Fix TailwindConfig's type broken when tailwindcss is not installed on the user's project

packages/tailwind/copy-tailwind-types.mjs

@@ -0,0 +1,13 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import url from "node:url";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+await fs.cp(
+  path.resolve(__dirname, "./node_modules/tailwindcss/types"),
+  path.resolve(__dirname, "./dist/tailwindcss"),
+  {
+    recursive: true
+  }
+);

packages/tailwind/package.json

@@ -23,7 +23,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc && NODE_ENV=production vite build --mode production",
+    "build": "tsc && NODE_ENV=production vite build --mode production && node ./copy-tailwind-types.mjs",
     "dev": "vite build --watch",
     "clean": "rm -rf dist",
     "lint": "eslint .",
@@ -68,7 +68,7 @@
     "tsup": "7.2.0",
     "typescript": "5.1.6",
     "vite": "5.1.8",
-    "vite-plugin-dts": "3.6.3",
+    "vite-plugin-dts": "4.2.4",
     "vitest": "1.1.1",
     "yalc": "1.0.0-pre.53"
   },

packages/tailwind/vite.config.ts

@@ -1,9 +1,20 @@
-import { resolve } from "node:path";
+import path from "node:path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  plugins: [dts({ include: ["src"], outDir: "dist" })],
+  plugins: [
+    dts({
+      include: ["src"],
+      compilerOptions: {
+        paths: {
+          tailwindcss: [path.resolve(__dirname, "./dist/tailwindcss")],
+        },
+      },
+      rollupTypes: true,
+      outDir: "dist",
+    }),
+  ],
   build: {
     rollupOptions: {
       // in summary, this bundles the following since vite defaults to bundling
@@ -13,7 +24,7 @@ export default defineConfig({
       external: ["react", /^react\/.*/, "react-dom", /react-dom\/.*/],
     },
     lib: {
-      entry: resolve(__dirname, "src/index.ts"),
+      entry: path.resolve(__dirname, "src/index.ts"),
       fileName: "index",
       formats: ["es", "cjs"],
     },