Skip to content

Commit 5f65c60

Browse files
kylecarbskylecarbs
committed
🤖 WIP: Migrate to Tailwind CSS v4
- Updated to tailwindcss@next (v4.0.0) and @tailwindcss/vite@next - Replaced PostCSS config with Vite plugin approach - Converted globals.css to use @import 'tailwindcss' (v4 format) - Removed tailwind.config.ts (v4 uses CSS-first configuration) - Updated Vite to v7 for ESM compatibility - Renamed vite.config.ts to vite.config.mts for proper ESM handling Dev mode works, but production builds fail with Tailwind plugin error. This appears to be a bug in the Tailwind v4 beta.
1 parent cd72e04 commit 5f65c60

File tree

6 files changed

+266
-211
lines changed

6 files changed

+266
-211
lines changed

‎bun.lock‎

Lines changed: 178 additions & 76 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"@storybook/react": "^8.6.14",
8686
"@storybook/react-vite": "^8.6.14",
8787
"@storybook/test-runner": "^0.23.0",
88+
"@tailwindcss/vite": "^4.0.0",
8889
"@testing-library/react": "^16.3.0",
8990
"@types/bun": "^1.2.23",
9091
"@types/cors": "^2.8.19",
@@ -138,13 +139,12 @@
138139
"shiki": "^3.13.0",
139140
"storybook": "^8.6.14",
140141
"tailwind-merge": "^3.3.1",
141-
"tailwindcss": "^3",
142-
"tailwindcss-animate": "^1.0.7",
142+
"tailwindcss": "^4.0.0",
143143
"ts-jest": "^29.4.4",
144144
"tsc-alias": "^1.8.16",
145145
"typescript": "^5.1.3",
146146
"typescript-eslint": "^8.45.0",
147-
"vite": "^4.4.0",
147+
"vite": "^7.1.11",
148148
"vite-plugin-svgr": "^4.5.0",
149149
"vite-plugin-top-level-await": "^1.6.0"
150150
},

postcss.config.js renamed to postcss.config.js.backup

File renamed without changes.

‎src/styles/globals.css‎

Lines changed: 82 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,101 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
42

53
@layer base {
64
:root {
7-
/* Plan Mode Colors (Blue) */
8-
--plan-mode: 210 70% 40%;
5+
/* Color Variables */
6+
--color-plan-mode: hsl(210 70% 40%);
7+
--color-plan-mode-hover: hsl(210 70% 52%);
8+
--color-plan-mode-light: hsl(210 70% 68%);
9+
--color-exec-mode: hsl(268.56 94.04% 55.19%);
10+
--color-exec-mode-hover: hsl(268.56 94.04% 67%);
11+
--color-exec-mode-light: hsl(268.56 94.04% 78%);
12+
--color-edit-mode: hsl(120 50% 35%);
13+
--color-edit-mode-hover: hsl(120 50% 47%);
14+
--color-edit-mode-light: hsl(120 50% 62%);
15+
--color-editing-mode: hsl(30 100% 50%);
16+
--color-debug-mode: hsl(214 100% 64%);
17+
--color-debug-light: hsl(214 100% 76%);
18+
--color-debug-text: hsl(214 100% 80%);
19+
--color-thinking-mode: hsl(271 76% 53%);
20+
--color-thinking-mode-light: hsl(271 76% 65%);
21+
--color-thinking-border: hsl(271 76% 53%);
22+
--color-background: hsl(0 0% 12%);
23+
--color-background-secondary: hsl(60 1% 15%);
24+
--color-border: hsl(240 2% 25%);
25+
--color-foreground: hsl(0 0% 83%);
26+
--color-foreground-secondary: hsl(0 0% 42%);
27+
--color-code-bg: hsl(0 6.43% 8.04%);
28+
--color-button-bg: hsl(0 0% 24%);
29+
--color-button-text: hsl(0 0% 80%);
30+
--color-button-hover: hsl(0 0% 29%);
31+
--color-user-border: hsl(0 0% 38%);
32+
--color-user-border-hover: hsl(0 0% 44%);
33+
--color-assistant-border: hsl(207 45% 40%);
34+
--color-assistant-border-hover: hsl(207 45% 50%);
35+
--color-message-header: hsl(0 0% 80%);
36+
--color-token-prompt: hsl(0 0% 40%);
37+
--color-token-completion: hsl(207 100% 40%);
38+
--color-token-variable: hsl(207 100% 40%);
39+
--color-token-fixed: hsl(0 0% 40%);
40+
--color-token-input: hsl(120 40% 35%);
41+
--color-token-output: hsl(207 100% 40%);
42+
--color-token-cached: hsl(0 0% 50%);
43+
--color-toggle-bg: hsl(0 0% 16.5%);
44+
--color-toggle-active: hsl(0 0% 22.7%);
45+
--color-toggle-hover: hsl(0 0% 17.6%);
46+
--color-toggle-text: hsl(0 0% 53.3%);
47+
--color-toggle-text-active: hsl(0 0% 100%);
48+
--color-toggle-text-hover: hsl(0 0% 66.7%);
49+
--color-interrupted: hsl(38 92% 50%);
50+
--color-review-accent: hsl(48 70% 50%);
51+
--color-git-dirty: hsl(38 92% 50%);
52+
--color-error: hsl(0 70% 50%);
53+
--color-error-bg: hsl(0 32% 18%);
54+
--color-pending: hsl(30 100% 70%);
55+
--color-input-bg: hsl(0 0% 12%);
56+
--color-input-text: hsl(0 0% 80%);
57+
--color-input-border: hsl(207 51% 59%);
58+
--color-input-border-focus: hsl(193 91% 64%);
59+
60+
/* Legacy variables for backwards compatibility (used in inline styles) */
961
--plan-mode-rgb: 31, 107, 184;
10-
--plan-mode-hover: 210 70% 52%;
11-
--plan-mode-light: 210 70% 68%;
12-
13-
/* Exec Mode Colors (Purple) */
14-
--exec-mode: 268.56 94.04% 55.19%;
15-
--exec-mode-hover: 268.56 94.04% 67%;
16-
--exec-mode-light: 268.56 94.04% 78%;
17-
18-
/* Edit Mode Colors (Green) */
19-
--edit-mode: 120 50% 35%;
20-
--edit-mode-hover: 120 50% 47%;
21-
--edit-mode-light: 120 50% 62%;
22-
23-
/* Read State Colors (Blue - reuses plan mode) */
24-
--read: 210 70% 40%;
25-
26-
/* Editing Mode Colors */
27-
--editing-mode: 30 100% 50%;
28-
29-
/* Pending Colors */
30-
--pending: 30 100% 70%;
31-
32-
/* Debug Mode Colors */
33-
--debug-mode: 214 100% 64%;
34-
--debug-light: 214 100% 76%;
35-
--debug-text: 214 100% 80%;
36-
37-
/* Thinking Mode Colors */
38-
--thinking-mode: 271 76% 53%;
39-
--thinking-mode-light: 271 76% 65%;
40-
--thinking-border: 271 76% 53%;
41-
42-
/* Background & Layout Colors */
43-
--background: 0 0% 12%;
44-
--background-secondary: 60 1% 15%;
45-
--border: 240 2% 25%;
46-
--foreground: 0 0% 83%;
47-
--foreground-secondary: 0 0% 42%;
48-
49-
/* Code Block Background */
50-
--code-bg: 0 6.43% 8.04%;
51-
52-
/* Button Colors */
53-
--button-bg: 0 0% 24%;
54-
--button-text: 0 0% 80%;
55-
--button-hover: 0 0% 29%;
56-
57-
/* User Message Colors */
58-
--user-border: 0 0% 38%;
59-
--user-border-hover: 0 0% 44%;
60-
61-
/* Assistant Message Colors */
62-
--assistant-border: 207 45% 40%;
63-
--assistant-border-hover: 207 45% 50%;
64-
65-
/* Message Header Colors */
66-
--message-header: 0 0% 80%;
67-
68-
/* Token Usage Colors */
69-
--token-prompt: 0 0% 40%;
70-
--token-completion: 207 100% 40%;
71-
--token-variable: 207 100% 40%;
72-
--token-fixed: 0 0% 40%;
73-
--token-input: 120 40% 35%;
74-
--token-output: 207 100% 40%;
75-
--token-cached: 0 0% 50%;
76-
77-
/* Toggle Group Colors */
78-
--toggle-bg: 0 0% 16.5%;
79-
--toggle-active: 0 0% 22.7%;
80-
--toggle-hover: 0 0% 17.6%;
81-
--toggle-text: 0 0% 53.3%;
82-
--toggle-text-active: 0 0% 100%;
83-
--toggle-text-hover: 0 0% 66.7%;
84-
85-
/* Interrupted/Warning Colors */
86-
--interrupted: 38 92% 50%;
87-
88-
/* Review/Selection Colors */
89-
--review-accent: 48 70% 50%;
90-
91-
/* Git Dirty/Uncommitted Changes Colors */
92-
--git-dirty: 38 92% 50%;
93-
94-
/* Error Colors */
95-
--error: 0 70% 50%;
96-
--error-bg: 0 32% 18%;
97-
98-
/* Input Colors */
99-
--input-bg: 0 0% 12%;
100-
--input-text: 0 0% 80%;
101-
--input-border: 207 51% 59%;
102-
--input-border-focus: 193 91% 64%;
103-
104-
/* Scrollbar Colors */
10562
--scrollbar-track: 0 0% 18%;
10663
--scrollbar-thumb: 0 0% 32%;
10764
--scrollbar-thumb-hover: 0 0% 42%;
10865

109-
/* Radius */
110-
--radius: 0.5rem;
66+
/* Legacy aliases for --color-* prefix (used in inline styles and raw CSS) */
67+
--color-plan-mode-alpha: color-mix(in srgb, var(--color-plan-mode), transparent 90%);
68+
--color-editing-mode-alpha: color-mix(in srgb, var(--color-editing-mode), transparent 90%);
69+
--color-text: var(--color-foreground);
70+
--color-text-secondary: var(--color-foreground-secondary);
11171

112-
/* Legacy aliases for backwards compatibility with --color-* prefix */
113-
--color-plan-mode: hsl(var(--plan-mode));
114-
--color-plan-mode-hover: hsl(var(--plan-mode-hover));
115-
--color-plan-mode-alpha: hsla(var(--plan-mode) / 0.1);
116-
--color-exec-mode: hsl(var(--exec-mode));
117-
--color-edit-mode: hsl(var(--edit-mode));
118-
--color-editing-mode: hsl(var(--editing-mode));
119-
--color-editing-mode-alpha: hsla(var(--editing-mode) / 0.1);
120-
--color-read: hsl(var(--read));
121-
--color-thinking-mode: hsl(var(--thinking-mode));
122-
--color-pending: hsl(var(--pending));
123-
--color-interrupted: hsl(var(--interrupted));
124-
--color-code-bg: hsl(var(--code-bg));
125-
--color-border: hsl(var(--border));
126-
--color-text: hsl(var(--foreground));
127-
--color-text-secondary: hsl(var(--foreground-secondary));
128-
--color-user-border: hsl(var(--user-border));
129-
--color-assistant-border: hsl(var(--assistant-border));
130-
--color-review-accent: hsl(var(--review-accent));
131-
--color-token-input: hsl(var(--token-input));
132-
--color-token-output: hsl(var(--token-output));
133-
--color-token-variable: hsl(var(--token-variable));
134-
--color-token-fixed: hsl(var(--token-fixed));
135-
--color-token-cached: hsl(var(--token-cached));
136-
137-
/* Font Variables */
72+
/* Font Variables (for var() usage in custom CSS) */
13873
--font-primary: IBM Plex Sans, sans-serif;
13974
--font-monospace: JetBrains Mono, Consolas, Monaco, monospace;
75+
76+
/* Other theme values */
77+
--radius: 0.5rem;
78+
}
79+
80+
/* Keyframes for animations */
81+
@keyframes accordion-down {
82+
from { height: 0; }
83+
to { height: var(--radix-accordion-content-height); }
84+
}
85+
86+
@keyframes accordion-up {
87+
from { height: var(--radix-accordion-content-height); }
88+
to { height: 0; }
14089
}
14190

14291
* {
143-
@apply border-border;
92+
border-color: var(--color-border);
14493
}
14594

14695
body {
147-
@apply bg-background text-foreground font-sans;
96+
background-color: var(--color-background);
97+
color: var(--color-foreground);
98+
font-family: var(--font-sans);
14899
font-size: 14px;
149100
}
150101

@@ -201,7 +152,7 @@
201152
}
202153

203154
code {
204-
@apply font-mono;
155+
font-family: var(--font-mono);
205156
}
206157

207158
/* Native tooltips */

tailwind.config.ts renamed to tailwind.config.ts.backup

File renamed without changes.

vite.config.ts renamed to vite.config.mts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
22
import react from "@vitejs/plugin-react";
33
import topLevelAwait from "vite-plugin-top-level-await";
44
import svgr from "vite-plugin-svgr";
5+
import tailwindcss from "@tailwindcss/vite";
56
import path from "path";
67
import { fileURLToPath } from "url";
78

@@ -38,6 +39,7 @@ const basePlugins = [
3839
plugins: babelPlugins,
3940
},
4041
}),
42+
tailwindcss(),
4143
];
4244

4345
export default defineConfig(({ mode }) => ({
@@ -76,7 +78,7 @@ export default defineConfig(({ mode }) => ({
7678
},
7779
worker: {
7880
format: "es",
79-
plugins: [topLevelAwait()],
81+
plugins: () => [topLevelAwait()],
8082
},
8183
server: {
8284
host: "127.0.0.1",

0 commit comments

Comments
 (0)