From ee69ce7cc10db828424b468e7b54b3f06b18e22c Mon Sep 17 00:00:00 2001
From: Thuc Pham <51660321+thucpn@users.noreply.github.com>
Date: Tue, 25 Feb 2025 09:38:31 +0700
Subject: [PATCH] bump: chat-ui and tailwind v4 (#509)

---
 .changeset/rare-eyes-protect.md               |  5 +
 .../nextjs/app/components/header.tsx          |  4 +-
 .../nextjs/app/components/ui/button.tsx       |  2 +-
 .../nextjs/app/components/ui/card.tsx         |  2 +-
 .../app/components/ui/chat/chat-avatar.tsx    |  4 +-
 .../ui/chat/chat-message-content.tsx          | 49 +++-------
 .../ui/chat/custom/deep-research-card.tsx     | 31 +++---
 .../components/ui/chat/tools/chat-tools.tsx   | 10 +-
 .../nextjs/app/components/ui/input.tsx        |  2 +-
 .../nextjs/app/components/ui/select.tsx       |  4 +-
 .../nextjs/app/components/ui/tabs.tsx         |  4 +-
 .../nextjs/app/components/ui/textarea.tsx     |  2 +-
 .../types/streaming/nextjs/app/globals.css    | 94 ++++++++++++++++++-
 templates/types/streaming/nextjs/package.json |  6 +-
 .../types/streaming/nextjs/postcss.config.js  |  3 +-
 .../types/streaming/nextjs/tailwind.config.ts | 82 ----------------
 16 files changed, 142 insertions(+), 162 deletions(-)
 create mode 100644 .changeset/rare-eyes-protect.md
 delete mode 100644 templates/types/streaming/nextjs/tailwind.config.ts

diff --git a/.changeset/rare-eyes-protect.md b/.changeset/rare-eyes-protect.md
new file mode 100644
index 000000000..7bada6858
--- /dev/null
+++ b/.changeset/rare-eyes-protect.md
@@ -0,0 +1,5 @@
+---
+"create-llama": patch
+---
+
+bump: chat-ui and tailwind v4
diff --git a/templates/types/streaming/nextjs/app/components/header.tsx b/templates/types/streaming/nextjs/app/components/header.tsx
index f02ce732e..2e5ce8f8a 100644
--- a/templates/types/streaming/nextjs/app/components/header.tsx
+++ b/templates/types/streaming/nextjs/app/components/header.tsx
@@ -3,11 +3,11 @@ import Image from "next/image";
 export default function Header() {
   return (
     <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-      <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+      <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-linear-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
         Get started by editing&nbsp;
         <code className="font-mono font-bold">app/page.tsx</code>
       </p>
-      <div className="fixed bottom-0 left-0 mb-4 flex h-auto w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:w-auto lg:bg-none lg:mb-0">
+      <div className="fixed bottom-0 left-0 mb-4 flex h-auto w-full items-end justify-center bg-linear-to-t from-white via-white dark:from-black dark:via-black lg:static lg:w-auto lg:bg-none lg:mb-0">
         <a
           href="https://www.llamaindex.ai/"
           className="flex items-center justify-center font-nunito text-lg font-bold gap-2"
diff --git a/templates/types/streaming/nextjs/app/components/ui/button.tsx b/templates/types/streaming/nextjs/app/components/ui/button.tsx
index 662b0404d..54d16b72c 100644
--- a/templates/types/streaming/nextjs/app/components/ui/button.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
diff --git a/templates/types/streaming/nextjs/app/components/ui/card.tsx b/templates/types/streaming/nextjs/app/components/ui/card.tsx
index da14564a2..e7a2f4fdf 100644
--- a/templates/types/streaming/nextjs/app/components/ui/card.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
       className,
     )}
     {...props}
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx
index cfa307cbf..0bdf620e3 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx
@@ -6,14 +6,14 @@ export function ChatMessageAvatar() {
   const { message } = useChatMessage();
   if (message.role === "user") {
     return (
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow">
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow-sm">
         <User2 className="h-4 w-4" />
       </div>
     );
   }
 
   return (
-    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow">
+    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow-sm">
       <Image
         className="rounded-md"
         src="/llama.png"
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx
index fa32f6f13..9d065b1f2 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx
@@ -1,44 +1,19 @@
-import {
-  ChatMessage,
-  ContentPosition,
-  getSourceAnnotationData,
-  useChatMessage,
-  useChatUI,
-} from "@llamaindex/chat-ui";
+import { ChatMessage } from "@llamaindex/chat-ui";
 import { DeepResearchCard } from "./custom/deep-research-card";
-import { Markdown } from "./custom/markdown";
 import { ToolAnnotations } from "./tools/chat-tools";
 
 export function ChatMessageContent() {
-  const { isLoading, append } = useChatUI();
-  const { message } = useChatMessage();
-  const customContent = [
-    {
-      // override the default markdown component
-      position: ContentPosition.MARKDOWN,
-      component: (
-        <Markdown
-          content={message.content}
-          sources={getSourceAnnotationData(message.annotations)?.[0]}
-        />
-      ),
-    },
-    // add the deep research card
-    {
-      position: ContentPosition.CHAT_EVENTS,
-      component: <DeepResearchCard message={message} />,
-    },
-    {
-      // add the tool annotations after events
-      position: ContentPosition.AFTER_EVENTS,
-      component: <ToolAnnotations message={message} />,
-    },
-  ];
   return (
-    <ChatMessage.Content
-      content={customContent}
-      isLoading={isLoading}
-      append={append}
-    />
+    <ChatMessage.Content>
+      <ChatMessage.Content.Event />
+      <ChatMessage.Content.AgentEvent />
+      <DeepResearchCard />
+      <ToolAnnotations />
+      <ChatMessage.Content.Image />
+      <ChatMessage.Content.Markdown />
+      <ChatMessage.Content.DocumentFile />
+      <ChatMessage.Content.Source />
+      <ChatMessage.Content.SuggestedQuestions />
+    </ChatMessage.Content>
   );
 }
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx
index 03d0bd8c1..bc6118e61 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Message } from "@llamaindex/chat-ui";
+import { getCustomAnnotation, useChatMessage } from "@llamaindex/chat-ui";
 import {
   AlertCircle,
   CheckCircle2,
@@ -54,7 +54,6 @@ type DeepResearchCardState = {
 };
 
 interface DeepResearchCardProps {
-  message: Message;
   className?: string;
 }
 
@@ -143,25 +142,19 @@ const deepResearchEventsToState = (
   );
 };
 
-export function DeepResearchCard({
-  message,
-  className,
-}: DeepResearchCardProps) {
-  const deepResearchEvents = message.annotations as
-    | DeepResearchEvent[]
-    | undefined;
-  const hasDeepResearchEvents = deepResearchEvents?.some(
-    (event) => event.type === "deep_research_event",
-  );
+export function DeepResearchCard({ className }: DeepResearchCardProps) {
+  const { message } = useChatMessage();
 
-  const state = useMemo(
-    () => deepResearchEventsToState(deepResearchEvents),
-    [deepResearchEvents],
-  );
+  const state = useMemo(() => {
+    const deepResearchEvents = getCustomAnnotation<DeepResearchEvent>(
+      message.annotations,
+      (annotation) => annotation?.type === "deep_research_event",
+    );
+    if (!deepResearchEvents.length) return null;
+    return deepResearchEventsToState(deepResearchEvents);
+  }, [message.annotations]);
 
-  if (!hasDeepResearchEvents) {
-    return null;
-  }
+  if (!state) return null;
 
   return (
     <Card className={cn("w-full", className)}>
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx
index 71acda6d6..a7e4eb218 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx
@@ -1,7 +1,8 @@
 import {
   Message,
   MessageAnnotation,
-  getAnnotationData,
+  getChatUIAnnotation,
+  useChatMessage,
   useChatUI,
 } from "@llamaindex/chat-ui";
 import { JSONValue } from "ai";
@@ -9,10 +10,11 @@ import { useMemo } from "react";
 import { Artifact, CodeArtifact } from "./artifact";
 import { WeatherCard, WeatherData } from "./weather-card";
 
-export function ToolAnnotations({ message }: { message: Message }) {
+export function ToolAnnotations() {
   // TODO: This is a bit of a hack to get the artifact version. better to generate the version in the tool call and
   // store it in CodeArtifact
   const { messages } = useChatUI();
+  const { message } = useChatMessage();
   const artifactVersion = useMemo(
     () => getArtifactVersion(messages, message),
     [messages, message],
@@ -20,7 +22,7 @@ export function ToolAnnotations({ message }: { message: Message }) {
   // Get the tool data from the message annotations
   const annotations = message.annotations as MessageAnnotation[] | undefined;
   const toolData = annotations
-    ? (getAnnotationData(annotations, "tools") as unknown as ToolData[])
+    ? (getChatUIAnnotation(annotations, "tools") as unknown as ToolData[])
     : null;
   return toolData?.[0] ? (
     <ChatTools data={toolData[0]} artifactVersion={artifactVersion} />
@@ -87,7 +89,7 @@ function getArtifactVersion(
   let versionIndex = 1;
   for (const m of messages) {
     const toolData = m.annotations
-      ? (getAnnotationData(m.annotations, "tools") as unknown as ToolData[])
+      ? (getChatUIAnnotation(m.annotations, "tools") as unknown as ToolData[])
       : null;
 
     if (toolData?.some((t) => t.toolCall.name === "artifact")) {
diff --git a/templates/types/streaming/nextjs/app/components/ui/input.tsx b/templates/types/streaming/nextjs/app/components/ui/input.tsx
index edfa129e6..10091d957 100644
--- a/templates/types/streaming/nextjs/app/components/ui/input.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/templates/types/streaming/nextjs/app/components/ui/select.tsx b/templates/types/streaming/nextjs/app/components/ui/select.tsx
index c01b068ba..c79a8e5e5 100644
--- a/templates/types/streaming/nextjs/app/components/ui/select.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/templates/types/streaming/nextjs/app/components/ui/tabs.tsx b/templates/types/streaming/nextjs/app/components/ui/tabs.tsx
index 42aa3b738..c69a3190e 100644
--- a/templates/types/streaming/nextjs/app/components/ui/tabs.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/tabs.tsx
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}
diff --git a/templates/types/streaming/nextjs/app/components/ui/textarea.tsx b/templates/types/streaming/nextjs/app/components/ui/textarea.tsx
index abe441bf2..dfde18ae1 100644
--- a/templates/types/streaming/nextjs/app/components/ui/textarea.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/templates/types/streaming/nextjs/app/globals.css b/templates/types/streaming/nextjs/app/globals.css
index 814fc1889..7e81701c2 100644
--- a/templates/types/streaming/nextjs/app/globals.css
+++ b/templates/types/streaming/nextjs/app/globals.css
@@ -1,6 +1,94 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@source '../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @layer base {
   :root {
diff --git a/templates/types/streaming/nextjs/package.json b/templates/types/streaming/nextjs/package.json
index f8f139379..4407ce861 100644
--- a/templates/types/streaming/nextjs/package.json
+++ b/templates/types/streaming/nextjs/package.json
@@ -17,7 +17,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@llamaindex/chat-ui": "0.0.14",
+    "@llamaindex/chat-ui": "^0.2.0",
     "ai": "^4.0.3",
     "ajv": "^8.12.0",
     "class-variance-authority": "^0.7.1",
@@ -46,7 +46,7 @@
     "@types/uuid": "^9.0.8",
     "@llamaindex/workflow": "^0.0.3",
     "@types/papaparse": "^5.3.15",
-    "autoprefixer": "^10.4.16",
+    "@tailwindcss/postcss": "^4.0.8",
     "cross-env": "^7.0.3",
     "eslint": "^9.14.0",
     "eslint-config-next": "^15.1.3",
@@ -54,7 +54,7 @@
     "postcss": "^8.4.32",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^4.0.8",
     "tsx": "^4.7.2",
     "typescript": "^5.3.2"
   }
diff --git a/templates/types/streaming/nextjs/postcss.config.js b/templates/types/streaming/nextjs/postcss.config.js
index 12a703d90..483f37854 100644
--- a/templates/types/streaming/nextjs/postcss.config.js
+++ b/templates/types/streaming/nextjs/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/templates/types/streaming/nextjs/tailwind.config.ts b/templates/types/streaming/nextjs/tailwind.config.ts
deleted file mode 100644
index d441c0508..000000000
--- a/templates/types/streaming/nextjs/tailwind.config.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { Config } from "tailwindcss";
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-const config: Config = {
-  darkMode: ["class"],
-  content: [
-    "app/**/*.{ts,tsx}",
-    "components/**/*.{ts,tsx}",
-    "node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        xl: `calc(var(--radius) + 4px)`,
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;