chore: update to Tailwind CSS 4.0 (#125)

This pull request focuses on modernizing the UI codebase and updating
dependencies for improved stability and consistency. The most
significant changes include upgrading various dependencies in
`package.json`, standardizing the usage of utility class syntax (notably
the placement of `!` for Tailwind overrides), and refactoring
shimmer/loading indicator styles to use a shared CSS class. These
updates collectively enhance maintainability, visual consistency, and
compatibility with newer tooling.

**Dependency upgrades and tooling modernization:**

* Updated dependencies in `package.json` to newer versions, including
major upgrades for `react`, `react-dom`, `axios`, `immer`, `streamdown`,
`uuid`, and several dev tools. Added `@tailwindcss/postcss`,
`@tailwindcss/vite`, `tailwindcss`, and `tw-shimmer` for improved
styling and loading effects.
* Changed `postcss.config.js` to use `@tailwindcss/postcss` instead of
the generic `tailwindcss` and `autoprefixer` plugins, aligning with the
new dependency setup.

**UI styling and class syntax standardization:**

* Refactored Tailwind utility class syntax throughout component files,
moving the `!` modifier to the end of each class for consistency and to
match modern conventions. This affects components like `cell-wrapper`,
`message-card`, `message-entry-container`, `attachment-popover`,
`add-comments-button`, and `comment-item`.
[[1]](diffhunk://#diff-157c9a8283c879c70716c7590796e53e556ae6b0e0cbc8038a6afb4f3bd79fb3L13-R13)
[[2]](diffhunk://#diff-8975f0fa9a3603405f4f946517a5664a3d9daa76a45686a2731b36ad656af3d6L13-R30)
[[3]](diffhunk://#diff-bdc99d7f83bf940e6c4720d6c71d1a152a0f30c450437de80721a4c69ec27056L99-R103)
[[4]](diffhunk://#diff-bdc99d7f83bf940e6c4720d6c71d1a152a0f30c450437de80721a4c69ec27056L121-R121)
[[5]](diffhunk://#diff-a7ead10fda306e9f40d19c07cb451419827ecfcd58f6af88a9d7e7c1b942a4feL6-R13)
[[6]](diffhunk://#diff-169cd97f4ec14d427d7b8708f74adb2c6e75bcf92be343205efc6bb49a9fa1a1L94-R105)
[[7]](diffhunk://#diff-169cd97f4ec14d427d7b8708f74adb2c6e75bcf92be343205efc6bb49a9fa1a1L119-R123)
[[8]](diffhunk://#diff-4914530d0e63e87a1adc148040ac012bc6b3fdffa22387da0b645a5fb49bce03L24-R69)

**Shimmer/loading indicator improvements:**

* Removed inline shimmer animation styles and replaced them with a
shared `shimmer` CSS class for loading indicators and tool cards,
simplifying code and ensuring consistent loading effects. This change
impacts `loading-indicator.tsx`, `toolcall-prepare.tsx`, and
`tools/general.tsx`.
[[1]](diffhunk://#diff-055ce0c61219eb693f487cd58a5c6e449e39db3b40e2a9dde983558c4c23ec40L19-L35)
[[2]](diffhunk://#diff-055ce0c61219eb693f487cd58a5c6e449e39db3b40e2a9dde983558c4c23ec40L173-R156)
[[3]](diffhunk://#diff-96812e399ce5ec2119eb57438e29fb08489fe8956d59029efdc7ce0510638ee2L18-R18)
[[4]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL18-L30)
[[5]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL77-R64)
[[6]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL124-R111)

**Minor UI and accessibility tweaks:**

* Updated component class names for improved readability and
accessibility, including changes to button states, error messages, and
code block rendering.
[[1]](diffhunk://#diff-cb1d9a39dd3f77b8f285a7ec7f3a576f1a119742662488d405dc3ce866b95d79L18-R18)
[[2]](diffhunk://#diff-f98697c89f34ff3081b7ac6a66e7e9bb2ed6fe82d274042b1d602a897154a89fL18-R18)
[[3]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL114-R101)
[[4]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL139-R123)
[[5]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL114-R101)
[[6]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL139-R123)
[[7]](diffhunk://#diff-169cd97f4ec14d427d7b8708f74adb2c6e75bcf92be343205efc6bb49a9fa1a1L94-R105)
[[8]](diffhunk://#diff-169cd97f4ec14d427d7b8708f74adb2c6e75bcf92be343205efc6bb49a9fa1a1L119-R123)
[[9]](diffhunk://#diff-4914530d0e63e87a1adc148040ac012bc6b3fdffa22387da0b645a5fb49bce03L24-R69)

**Removal of unused code:**

* Deleted unused inline style constants for shimmer/loading effects,
further cleaning up the codebase.
[[1]](diffhunk://#diff-055ce0c61219eb693f487cd58a5c6e449e39db3b40e2a9dde983558c4c23ec40L19-L35)
[[2]](diffhunk://#diff-6bbab187f6b867777c579b60e164e230164a16b8b54121d874020105b1105fbcL18-L30)

These changes collectively improve the project's maintainability, visual
consistency, and readiness for future updates.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Junyi-99

webapp/_webapp/bun.lock

@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "@buf/googleapis_googleapis.bufbuild_es": "^2.2.3-20250211200939-546238c53f73.1",
-    "@bufbuild/protobuf": "^2.5.1",
+    "@bufbuild/protobuf": "^2.11.0",
     "@capacitor-community/apple-sign-in": "^7.0.1",
-    "@heroui/react": "^2.7.9",
-    "@iconify/react": "^6.0.0",
+    "@heroui/react": "2.8.9",
+    "@iconify/react": "^6.0.2",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@opentelemetry/exporter-logs-otlp-http": "^0.219.0",
     "@opentelemetry/exporter-metrics-otlp-http": "^0.219.0",
@@ -41,58 +41,52 @@
     "@opentelemetry/sdk-trace-web": "^2.8.0",
     "@opentelemetry/semantic-conventions": "^1.41.1",
     "@r2wc/react-to-web-component": "^2.1.0",
-    "@streamdown/cjk": "^1.0.1",
-    "@streamdown/code": "^1.0.1",
-    "@streamdown/math": "^1.0.1",
-    "@streamdown/mermaid": "^1.0.1",
-    "@tanstack/react-query": "^5.79.0",
+    "@streamdown/cjk": "^1.0.2",
+    "@streamdown/code": "^1.0.2",
+    "@streamdown/math": "^1.0.2",
+    "@streamdown/mermaid": "^1.0.2",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@tanstack/react-query": "^5.90.21",
     "@types/diff": "^8.0.0",
-    "@uidotdev/usehooks": "^2.4.1",
-    "axios": "^1.9.0",
-    "baseline-browser-mapping": "^2.9.12",
-    "caniuse-lite": "^1.0.30001762",
-    "diff": "^8.0.2",
+    "axios": "^1.13.5",
+    "diff": "^8.0.3",
     "events": "^3.3.0",
-    "framer-motion": "^12.15.0",
+    "framer-motion": "12.34.2",
     "highlight.js": "^11.11.1",
-    "immer": "^10.1.1",
-    "jszip": "^3.10.1",
-    "markdown-to-jsx": "^7.7.6",
-    "openai": "^5.0.1",
-    "postcss": "^8.5.4",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "immer": "11.1.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-rnd": "^10.5.2",
-    "semver": "^7.7.2",
-    "streamdown": "^2.1.0",
-    "uuid": "^11.1.0",
+    "semver": "^7.7.4",
+    "streamdown": "^2.2.0",
+    "tailwindcss": "^4.3.1",
+    "tw-shimmer": "^0.4.6",
+    "uuid": "^13.0.0",
     "web-vitals": "^5.3.0",
-    "zustand": "^5.0.5"
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.37.1",
-    "@eslint/js": "^9.28.0",
-    "@types/bun": "^1.3.5",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.14",
+    "@eslint/js": "^9.39.0",
+    "@types/bun": "^1.3.9",
     "@types/chrome": "^0.0.326",
-    "@types/codemirror": "^5.60.16",
+    "@types/codemirror": "^5.60.17",
     "@types/events": "^3.0.3",
-    "@types/node": "^22.15.29",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@types/semver": "^7.7.0",
-    "@vitejs/plugin-react-swc": "^3.10.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.28.0",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/semver": "^7.7.1",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "eslint": "^9.39.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.2.0",
-    "nodemon": "^3.1.10",
+    "globals": "^17.7.0",
+    "nodemon": "^3.1.11",
     "postcss-prefix-selector": "^2.1.1",
-    "prettier": "3.5.3",
-    "tailwindcss": "^3.4.17",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.33.0",
-    "vite": "^6.3.5"
+    "prettier": "3.8.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.62.0",
+    "vite": "^7.3.1"
   }
 }

webapp/_webapp/package-lock.json

@@ -2,12 +2,16 @@
 // (VITE_CONFIG=default) so preflight/heroui don't leak into Overleaf. The
 // .pd-scope class sits on every container we mount into (#paper-debugger-root
 // and #pd-embed-sidebar). Settings/popup are standalone pages and stay unscoped.
+//
+// Tailwind v4 via @tailwindcss/postcss (not the Vite plugin) so the prefix step
+// runs AFTER Tailwind emits its CSS. v4 handles vendor prefixing internally, so
+// autoprefixer is gone.
 const SCOPE = ".pd-scope";
 const scoped = process.env.VITE_CONFIG === "default";
 
 export default {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
     ...(scoped && {
       "postcss-prefix-selector": {
         prefix: SCOPE,
@@ -33,6 +37,5 @@ export default {
         },
       },
     }),
-    autoprefixer: {},
   },
 };

webapp/_webapp/package.json

@@ -10,7 +10,7 @@ const CellWrapper = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={ref}
       className={cn(
-        "flex items-center justify-between gap-2 rounded-medium bg-content2 !p-2 !pr-[12px] !pl-[20px]",
+        "flex items-center justify-between gap-2 rounded-medium bg-content2 p-2! pr-[12px]! pl-[20px]!",
         className,
       )}
       {...props}

webapp/_webapp/postcss.config.js

@@ -15,7 +15,7 @@ export const CodeBlock = ({ code, className }: CodeBlockProps) => {
 
   return (
     <pre
-      className={`p-2 rounded-md bg-gray-200 dark:!bg-default-200 text-sm text-wrap break-words ${className}`}
+      className={`p-2 rounded-md bg-gray-200 dark:!bg-default-200 text-sm text-wrap wrap-break-word ${className}`}
       dangerouslySetInnerHTML={{ __html: highlightedCode }}
     />
   );

webapp/_webapp/src/components/cell-wrapper.tsx

@@ -16,23 +16,6 @@ interface LoadingIndicatorProps {
 // Constants
 // ============================================================================
 
-const STYLES = {
-  loading: {
-    animation: {
-      WebkitTextFillColor: "transparent",
-      animationDelay: "0.5s",
-      animationDuration: "3s",
-      animationIterationCount: "infinite",
-      animationName: "shimmer",
-      background: "#cdcdcd -webkit-gradient(linear, 100% 0, 0 0, from(#cdcdcd), color-stop(.5, #1a1a1a), to(#cdcdcd))",
-      WebkitBackgroundClip: "text",
-      backgroundRepeat: "no-repeat",
-      backgroundSize: "50% 200%",
-      backgroundPositionX: "-100%",
-    },
-  },
-} as const;
-
 const PHASE_STYLES = {
   green: {
     background: "linear-gradient(90deg, #35aa6b 0%, #7cc89f 100%)",
@@ -170,8 +153,7 @@ export const LoadingIndicator = ({ text = "Thinking", estimatedSeconds = 0, erro
     <div className="indicator">
       {/* Status Text */}
       <div
-        className={`flex space-x-1 text-xs ${!isTimeout && !errorMessage ? "loading-shimmer" : ""}`}
-        style={!isTimeout && !errorMessage ? STYLES.loading.animation : undefined}
+        className={`flex space-x-1 text-xs ${!isTimeout && !errorMessage ? "shimmer" : ""}`}
       >
         <span className={isTimeout || errorMessage ? "text-rose-400" : ""}>{getStatusMessage()}</span>
       </div>

webapp/_webapp/src/components/code-block.tsx

@@ -15,7 +15,7 @@ interface MarkdownComponentProps {
 const MarkdownComponent = memo(({ children, animated }: MarkdownComponentProps) => {
   return (
     <Streamdown
-      className="space-y-1 leading-[1.50]"
+      className="space-y-1 leading-normal"
       shikiTheme={["github-light", "ayu-dark"]}
       components={{
         h1: ({ children }) => (

webapp/_webapp/src/components/loading-indicator.tsx

@@ -10,24 +10,24 @@ import { DisplayMessage } from "../stores/types";
 // Constants
 export const STYLES = {
   container: {
-    base: "!flex !flex-row !gap-2",
+    base: "flex! flex-row! gap-2!",
     assistant: "",
     indicator: "",
   },
   messageWrapper: {
-    base: "!max-w-full !flex !flex-col !gap-4",
-    assistant: "!max-w-[100%]",
-    user: "!max-w-[70%]",
-    indicator: "!w-full",
+    base: "max-w-full! flex! flex-col! gap-4!",
+    assistant: "max-w-full!",
+    user: "max-w-[70%]!",
+    indicator: "w-full!",
   },
   messageBox: {
     base: cn(),
-    assistant: "px-3 pt-3 pb-1 my-2 !border !border-transparent",
+    assistant: "px-3 pt-3 pb-1 my-2 border! border-transparent!",
     user: "px-3 py-2 bg-gray-100 dark:!bg-default-200 self-end my-2",
     indicator: "px-3",
   },
   attachment: {
-    content: "!max-w-[300px] !bg-default-100 dark:!bg-default-100",
+    content: "max-w-[300px]! !bg-default-100 dark:!bg-default-100",
     text: "!text-tiny !text-default-400",
   },
 } as const;

webapp/_webapp/src/components/markdown.tsx

@@ -1,11 +1,11 @@
 import { cn, Tooltip } from "@heroui/react";
 import { GeneralToolCard } from "./tools/general";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import googleAnalytics from "../../libs/google-analytics";
-import { getProjectId } from "../../libs/helpers";
+import googleAnalytics from "@/libs/google-analytics";
+import { getProjectId } from "@/libs/helpers";
 import MarkdownComponent from "../markdown";
 import { TextPatches } from "../text-patches";
-import { useAuthStore } from "../../stores/auth-store";
+import { useAuthStore } from "@/stores/auth-store";
 import { Icon } from "@iconify/react/dist/iconify.js";
 
 // Helper functions
@@ -17,10 +17,9 @@ interface ParsedMessage {
 const parseMessage = (message: string): ParsedMessage => {
   const regex = /<PaperDebugger>([\s\S]*?)<\/PaperDebugger>/g;
   const paperDebuggerContents: string[] = [];
-  let regularContent = message;
 
   // Extract all PaperDebugger blocks
-  regularContent = message.replace(regex, (_, content) => {
+  const regularContent = message.replace(regex, (_, content) => {
     const processedContent = content.replace(/\n/g, "§NEWLINE§");
     paperDebuggerContents.push(processedContent);
     return ""; // Remove the tag from regular content
@@ -96,11 +95,11 @@ export const AssistantMessageContainer = ({
       <Icon
         icon="tabler:pencil"
         className={cn(
-          "!w-4 !h-4 !text-[14px] !text-gray-400  !animate-bounce",
-          "!transition-all !duration-300 !ease-in-out",
-          "!inline-block !align-middle !ml-1",
-          preparing && "!opacity-100",
-          !preparing && "!opacity-0 !hidden",
+          "w-4! h-4! text-[14px]! text-gray-400!  animate-bounce!",
+          "transition-all! duration-300! ease-in-out!",
+          "inline-block! align-middle! ml-1!",
+          preparing && "opacity-100!",
+          !preparing && "opacity-0! hidden!",
         )}
       />
     );
@@ -118,7 +117,7 @@ export const AssistantMessageContainer = ({
   return (
     showMessage && (
       <div className="chat-message-entry noselect">
-        <div className={cn("message-box-assistant rnd-cancel", messageId.startsWith("error-") && "!text-red-500")}>
+        <div className={cn("message-box-assistant rnd-cancel", messageId.startsWith("error-") && "text-red-500!")}>
           {/* Reasoning content */}
           {reasoningComponent}