feat(code): upgrade Tailwind CSS v3 to v4 (#1540)

Author: adamleithp

apps/code/.storybook/main.ts

@@ -2,6 +2,7 @@
 import path, { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import type { StorybookConfig } from "@storybook/react-vite";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { mergeConfig } from "vite";
 
@@ -22,7 +23,7 @@ const config: StorybookConfig = {
   framework: getAbsolutePath("@storybook/react-vite"),
   async viteFinal(config) {
     return mergeConfig(config, {
-      plugins: [react()],
+      plugins: [tailwindcss(), react()],
       resolve: {
         alias: {
           "@": path.resolve(__dirname, "../src"),

apps/code/package.json

@@ -66,7 +66,6 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/ui": "^4.0.10",
     "adm-zip": "^0.5.16",
-    "autoprefixer": "^10.4.17",
     "drizzle-kit": "^0.31.9",
     "electron": "^41.0.0",
     "fuse.js": "^7.1.0",
@@ -77,7 +76,7 @@
     "memfs": "^4.56.10",
     "postcss": "^8.4.33",
     "storybook": "10.2.0",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.2.2",
     "tsx": "^4.20.6",
     "typed-openapi": "^2.2.2",
     "typescript": "^5.9.3",
@@ -88,6 +87,7 @@
     "yaml": "^2.8.1"
   },
   "dependencies": {
+    "@base-ui/react": "^1.3.0",
     "@codemirror/lang-angular": "^0.1.4",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
@@ -113,6 +113,7 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/view": "^6.39.17",
     "@dnd-kit/react": "^0.1.21",
+    "@fontsource-variable/inter": "^5.2.8",
     "@lezer/common": "^1.5.1",
     "@lezer/highlight": "^1.2.3",
     "@modelcontextprotocol/ext-apps": "^1.1.2",
@@ -129,10 +130,15 @@
     "@posthog/electron-trpc": "workspace:*",
     "@posthog/git": "workspace:*",
     "@posthog/hedgehog-mode": "^0.0.48",
+    "@posthog/quill-blocks": "link:/Users/adamleithp/Dev/posthog/packages/quill/packages/blocks",
+    "@posthog/quill-components": "link:/Users/adamleithp/Dev/posthog/packages/quill/packages/components",
+    "@posthog/quill-primitives": "link:/Users/adamleithp/Dev/posthog/packages/quill/packages/primitives",
+    "@posthog/quill-tokens": "link:/Users/adamleithp/Dev/posthog/packages/quill/packages/tokens",
     "@posthog/shared": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.90.2",
     "@tiptap/core": "^3.13.0",
     "@tiptap/extension-mention": "^3.13.0",
@@ -150,6 +156,8 @@
     "@xterm/xterm": "^5.5.0",
     "better-sqlite3": "^12.8.0",
     "chokidar": "^5.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "detect-libc": "^1.0.3",
     "dotenv": "^17.2.3",
@@ -164,6 +172,7 @@
     "immer": "^11.0.1",
     "inversify": "^7.10.6",
     "is-glob": "^4.0.3",
+    "lucide-react": "^1.7.0",
     "micromatch": "^4.0.5",
     "node-addon-api": "^8.5.0",
     "node-machine-id": "^1.1.12",
@@ -182,7 +191,10 @@
     "smol-toml": "^1.6.0",
     "sonner": "^2.0.7",
     "striptags": "^3.2.0",
+    "tailwind-merge": "^3.5.0",
     "tippy.js": "^6.3.7",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
     "vscode-icons-js": "^11.6.1",
     "zod": "^4.1.12",
     "zustand": "^4.5.0"

apps/code/postcss.config.js

@@ -1,5 +1,4 @@
 import "reflect-metadata";
-import "@radix-ui/themes/styles.css";
 // Side effect: attaches window focus/visibility listeners so `focused` is accurate before inbox queries mount.
 import "@stores/rendererWindowFocusStore";
 import { Providers } from "@components/Providers";

apps/code/src/renderer/main.tsx

@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, radix, components, utilities;
+@import "@radix-ui/themes/styles.css" layer(radix);
+@import "tailwindcss";
+@config "../../../tailwind.config.js";
 
 @font-face {
   font-family: "Berkeley Mono";

apps/code/src/renderer/styles/globals.css

@@ -1,6 +1,7 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -20,6 +21,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [
+      tailwindcss(),
       react(),
       tsconfigPaths(),
       createPosthogPlugin(env, "posthog-code-renderer"),