feat: react-ui tailwindcss integration (#440)

packages/react-ui/package.json

@@ -23,21 +23,17 @@
         "default": "./dist/tailwindcss.js"
       }
     },
-    "./styles.css": {
-      "types": "./dist/styles.css.d.ts",
-      "default": "./dist/styles.css"
+    "./styles": {
+      "default": "./dist/styles/index.css"
     },
-    "./markdown-styles.css": {
-      "types": "./dist/markdown-styles.css.d.ts",
-      "default": "./dist/markdown-styles.css"
+    "./styles/*": {
+      "default": "./dist/styles/*.css"
     },
-    "./themes/default.css": {
-      "types": "./dist/themes/default.css.d.ts",
-      "default": "./dist/themes/default.css"
+    "./tailwindcss/styles/*.css": {
+      "default": "./dist/tailwindcss/styles/*.css"
     },
-    "./themes/shadcn.css": {
-      "types": "./dist/themes/shadcn.css.d.ts",
-      "default": "./dist/themes/shadcn.css"
+    "./tailwindcss/themes/*.css": {
+      "default": "./dist/tailwindcss/themes/*.css"
     }
   },
   "source": "./src/index.ts",
@@ -49,7 +45,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsup && tsup --config tsup.plugin.config.ts"
+    "build": "tsx scripts/build.mts"
   },
   "dependencies": {
     "@assistant-ui/react-markdown": "workspace:*",
@@ -66,15 +62,20 @@
   "peerDependencies": {
     "@assistant-ui/react": "^0.3.5",
     "@types/react": "*",
-    "react": "^18"
+    "react": "^18",
+    "tailwindcss": "^3.4.4"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@assistant-ui/tsconfig": "workspace:*",
+    "@assistant-ui/tailwindcss-transformer": "workspace:*",
     "@types/node": "^20.14.9",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.19",
@@ -84,6 +85,7 @@
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.1.0",
+    "tsx": "^4.16.0",
     "typescript": "^5.5.3"
   },
   "publishConfig": {

packages/react-ui/postcss.config.mjs

@@ -4,6 +4,7 @@ const config = {
     tailwindcss: {},
     autoprefixer: {},
     "postcss-nested": {},
+    "@assistant-ui/tailwindcss-transformer": {},
   },
 };
 

packages/react-ui/scripts/build.mts

@@ -0,0 +1,47 @@
+import { build } from "tsup";
+import { copyFileSync, mkdirSync } from "node:fs";
+
+// JS
+
+await build({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  esbuildOptions: (options) => {
+    options.banner = {
+      js: '"use client";',
+    };
+  },
+});
+
+await build({
+  entry: ["src/tailwindcss.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  sourcemap: true,
+});
+
+// css
+
+await build({
+  entry: [
+    "src/styles/index.css",
+    "src/styles/markdown.css",
+    "src/styles/modal.css",
+  ],
+  outDir: "dist/styles",
+});
+
+mkdirSync("dist/tailwindcss/styles", { recursive: true });
+copyFileSync(
+  "src/styles/base-components.css",
+  "dist/tailwindcss/styles/base-components.css",
+);
+copyFileSync("src/styles/thread.css", "dist/tailwindcss/styles/thread.css");
+copyFileSync("src/styles/markdown.css", "dist/tailwindcss/styles/markdown.css");
+copyFileSync("src/styles/modal.css", "dist/tailwindcss/styles/modal.css");
+
+mkdirSync("dist/tailwindcss/themes", { recursive: true });
+copyFileSync("src/themes/default.css", "dist/tailwindcss/themes/default.css");