Upgrade to Tailwind v4

frontend/package.json

@@ -19,20 +19,20 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hot-toast": "^2.6.0",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.5.0",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
     "@tanstack/router-devtools": "^1.166.11",
     "@tanstack/router-plugin": "^1.167.9",
     "@types/node": "^24.10.9",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.2.0",
-    "autoprefixer": "^10.4.27",
     "postcss": "^8.5.8",
     "prettier": "^3.8.1",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },

frontend/package.json.md5

@@ -1 +1 @@
-116a24ac3583b451b1f79ac3051044cb
+a67b50d360aedef1ac0f8ffc81b6bfc5

frontend/postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

frontend/src/components/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '~/utils/helpers';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center text-sm font-medium transition-colors border rounded-lg whitespace-nowrap ring-offset-background disabled:pointer-events-none disabled:opacity-50 focus:outline-offset-2 focus-visible:outline focus:outline-1',
+  'inline-flex items-center justify-center text-sm font-medium transition-colors border rounded-lg whitespace-nowrap ring-offset-background disabled:pointer-events-none disabled:opacity-50 focus:outline-offset-2 focus-visible:outline-solid focus:outline-1',
   {
     variants: {
       variant: {
@@ -21,7 +21,7 @@ const buttonVariants = cva(
         // outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         // secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground border-transparent focus:outline-offset-2 focus-visible:outline focus:outline-1 focus:outline-primary',
+          'hover:bg-accent hover:text-accent-foreground border-transparent focus:outline-offset-2 focus-visible:outline-solid focus:outline-1 focus:outline-primary',
         // link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

frontend/src/components/checkbox.tsx

@@ -9,7 +9,7 @@ export function Checkbox({
     <input
       type="checkbox"
       className={cn(
-        'w-5 h-5 transition-colors duration-200 ease-in-out border cursor-pointer rounded-md appearance-none outline-offset-2 focus-visible:outline outline-1 outline-primary bg-background text-white border-primary grid place-content-center before:invisible before:checked:visible before:w-3 before:h-3 before:rounded-sm before hover:outline before:bg-primary checked:border-primary',
+        'w-5 h-5 transition-colors duration-200 ease-in-out border cursor-pointer rounded-md appearance-none outline-offset-2 focus-visible:outline-solid outline-1 outline-primary bg-background text-white border-primary grid place-content-center before:invisible checked:before:visible before:w-3 before:h-3 before:rounded-xs before hover:outline-solid before:bg-primary checked:border-primary',
         className
       )}
       {...props}

frontend/src/components/input.tsx

@@ -8,7 +8,7 @@ export function Input({
   return (
     <input
       className={cn(
-        'w-full px-3 py-2 transition-colors duration-200 ease-in-out border rounded-lg appearance-none outline-offset-2 focus-visible:outline outline-1 outline-primary bg-background text-white border-primary hover:outline'
+        'w-full px-3 py-2 transition-colors duration-200 ease-in-out border rounded-lg appearance-none outline-offset-2 focus-visible:outline-solid outline-1 outline-primary bg-background text-white border-primary hover:outline-solid'
       )}
       {...props}
     />

frontend/src/components/select-multiple.tsx

@@ -26,7 +26,7 @@ export function SelectMultiple({ options, value, onChanged, className, ...props
             onChange={(e) =>
               onChanged((prev) => (e.target.checked ? [...prev, option.value] : prev.filter((n) => n !== option.value)))
             }
-            className="flex-shrink-0"
+            className="shrink-0"
           />
           <label htmlFor={`${props.id}-${option.value}`} className="flex items-center gap-2 cursor-pointer">
             {option.icon && <img src={option.icon} width={20} height={20} />}

frontend/src/components/select.tsx

@@ -5,7 +5,7 @@ export function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectE
   return (
     <select
       className={cn(
-        'w-full px-3 py-2 transition-colors duration-200 cursor-pointer ease-in-out border rounded-lg appearance-none outline-offset-2 focus-visible:outline outline-1 outline-primary bg-background text-primary border-primary hover:outline',
+        'w-full px-3 py-2 transition-colors duration-200 cursor-pointer ease-in-out border rounded-lg appearance-none outline-offset-2 focus-visible:outline-solid outline-1 outline-primary bg-background text-primary border-primary hover:outline-solid',
         className
       )}
       {...props}

frontend/src/routes/settings.tsx

@@ -53,7 +53,7 @@ function Settings() {
         <div className="flex flex-col gap-2">
           <h2 className="text-xl font-bold text-primary">Info</h2>
 
-          <div className="grid max-w-6xl grid-cols-[16rem,auto]">
+          <div className="grid max-w-6xl grid-cols-[16rem_auto]">
             <div>Spinup version</div>
             <div>{spinupVersion}</div>
           </div>

frontend/src/sections/command-info.tsx

@@ -48,7 +48,7 @@ export function CommandInfo({ command }: { command: sqlc.Command }) {
         </Button>
       </div>
 
-      <div className="grid grid-cols-[16rem,auto]">
+      <div className="grid grid-cols-[16rem_auto]">
         <div>Command</div>
         <div className="text-sm">{command.Command}</div>
       </div>

frontend/src/sections/navbar.tsx

@@ -40,10 +40,10 @@ export function Navbar() {
   };
 
   return (
-    <div className="flex items-center h-20 gap-8 px-4 border-b shadow-sm select-none shadow-primary-dark/50 min-h-20 border-primary/80 overflow-clip">
+    <div className="flex items-center h-20 gap-8 px-4 border-b shadow-xs select-none shadow-primary-dark/50 min-h-20 border-primary/80 overflow-clip">
       <Link
         to="/"
-        className="rounded-lg focus:outline-offset-2 focus-visible:outline focus:outline-1 focus:outline-primary"
+        className="rounded-lg focus:outline-offset-2 focus-visible:outline-solid focus:outline-1 focus:outline-primary"
       >
         <img src={icon} id="logo" alt="logo" className="cursor-pointer w-14 h-14" draggable={false} />
       </Link>

frontend/src/sections/project-info.tsx

@@ -72,7 +72,7 @@ function ProjectInfoHeader({ project, isRunning }: { project: core.Project; isRu
         {canRunProject ? (
           <button
             className={cn(
-              'p-2 rounded-lg hover:bg-black/10 focus:outline-offset-2 focus-visible:outline focus:outline-1',
+              'p-2 rounded-lg hover:bg-black/10 focus:outline-offset-2 focus-visible:outline-solid focus:outline-1',
               isRunning ? 'focus:outline-error' : 'focus:outline-success'
             )}
             onClick={startOrStopProject}
@@ -276,7 +276,7 @@ export function ProjectInfo({ project }: { project: core.Project }) {
     <div>
       <ProjectInfoHeader project={project} isRunning={isRunning} />
 
-      <div className="grid items-center max-w-6xl grid-cols-[16rem,auto] gap-x-4">
+      <div className="grid items-center max-w-6xl grid-cols-[16rem_auto] gap-x-4">
         <div>Domain</div>
 
         {isRunning ? (

frontend/src/style.css

@@ -1,6 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-primary: #d8fe05;
+  --color-primary-dark: #b0cf01;
+  --color-background: #575757;
+  --color-info: #5dade2;
+  --color-info-dark: #3297da;
+  --color-success: #88d567;
+  --color-warning: #ffd700;
+  --color-error: #c94b55;
+
+  --font-azeret: Azeret;
+}
+
+/*
+  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);
+  }
+}
 
 @font-face {
   font-family: 'Azeret';