chore: migrate Tailwind v3.4 to v4

package.json

@@ -28,18 +28,18 @@
     "turndown": "^7.2.4"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.1",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@types/turndown": "^5.0.6",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/coverage-v8": "^3.2.6",
-    "autoprefixer": "^10.4.21",
     "eslint": "^9.29.0",
     "eslint-plugin-react": "^7.37.5",
     "fallow": "^2.96.0",
     "globals": "^16.2.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.3.1",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.34.0",
     "vite": "^7.1.2",

postcss.config.js

@@ -1,6 +1 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+export default {};

src/components/Result.tsx

@@ -73,7 +73,7 @@ function ParsedCard({
   edit: EditableParse;
 }) {
   return (
-    <Card className="flex flex-col gap-6 shadow-sm">
+    <Card className="flex flex-col gap-6 shadow-xs">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <StatusBadge tone="ok">Parsed</StatusBadge>
@@ -126,7 +126,7 @@ function LimitedParsingCard({
   const uniqueUrls = Array.from(new Set(links.map((l) => l.url)));
 
   return (
-    <Card className="flex flex-col gap-5 shadow-sm">
+    <Card className="flex flex-col gap-5 shadow-xs">
       <header className="flex items-center justify-between">
         <StatusBadge tone="limited">Limited parsing</StatusBadge>
         <Button variant="link" className="text-content-primary" onClick={onReset}>

src/components/features/JdInput.tsx

@@ -73,7 +73,7 @@ export function JdInput({ value, onChange, resumeParsed = false }: JdInputProps)
   };
 
   return (
-    <Card className="flex flex-col gap-3 shadow-sm">
+    <Card className="flex flex-col gap-3 shadow-xs">
       <div className="flex flex-col gap-1">
         <h2
           id="jd-input-label"
@@ -99,7 +99,7 @@ export function JdInput({ value, onChange, resumeParsed = false }: JdInputProps)
           onKeyDown={handleUrlKeyDown}
           placeholder="Or paste a job posting URL (Greenhouse, Lever, Workable, Recruitee)…"
           aria-label="Job posting URL"
-          className="min-w-0 flex-1 rounded-lg border border-border-light bg-surface-subtle px-3 py-1.5 text-sm text-content-primary placeholder:text-content-muted focus:border-border focus:outline-none"
+          className="min-w-0 flex-1 rounded-lg border border-border-light bg-surface-subtle px-3 py-1.5 text-sm text-content-primary placeholder:text-content-muted focus:border-border focus:outline-hidden"
         />
         <Button
           variant="primary"
@@ -132,7 +132,7 @@ export function JdInput({ value, onChange, resumeParsed = false }: JdInputProps)
         onChange={(e) => onChange(e.target.value)}
         placeholder="Paste the job description here…"
         aria-labelledby="jd-input-label"
-        className="min-h-[160px] resize-y rounded-lg border border-border-light bg-surface-subtle p-3 text-sm leading-relaxed text-content-primary placeholder:text-content-muted focus:border-border focus:outline-none"
+        className="min-h-[160px] resize-y rounded-lg border border-border-light bg-surface-subtle p-3 text-sm leading-relaxed text-content-primary placeholder:text-content-muted focus:border-border focus:outline-hidden"
       />
 
       {value.trim().length > 0 && !resumeParsed && (

src/components/features/JdMatch.tsx

@@ -27,7 +27,7 @@ export function JdMatch({ coverage, terms, nounsDropped = 0 }: JdMatchProps) {
   const covered = coverage.covered.length;
 
   return (
-    <Card className="flex flex-col gap-4 shadow-sm">
+    <Card className="flex flex-col gap-4 shadow-xs">
       <header className="flex flex-col gap-1">
         <div className="flex items-baseline gap-2">
           <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">

src/components/ui/Button.tsx

@@ -35,7 +35,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const BASE =
-  "inline-flex items-center justify-center gap-1 rounded font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-amber disabled:cursor-not-allowed disabled:opacity-60";
+  "inline-flex items-center justify-center gap-1 rounded font-medium transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-amber disabled:cursor-not-allowed disabled:opacity-60";
 
 const VARIANT: Record<ButtonVariant, string> = {
   primary:

src/components/ui/EditableField.tsx

@@ -115,7 +115,7 @@ export function EditableField({
             sizeCls,
             weightCls,
             "text-content-primary",
-            "outline-none focus:ring-1 focus:ring-brand-amber",
+            "outline-hidden focus:ring-1 focus:ring-brand-amber",
           ].join(" ")}
         />
       </span>
@@ -148,7 +148,7 @@ export function EditableField({
         weightCls,
         hasValue ? "text-content-primary" : "text-content-muted italic",
         hoverReveal
-          ? "cursor-text rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-brand-amber"
+          ? "cursor-text rounded-xs outline-hidden focus-visible:ring-1 focus-visible:ring-brand-amber"
           : "",
       ]
         .filter(Boolean)

src/styles.css

@@ -1,6 +1,68 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme inline {
+  /* Font families */
+  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* Brand colors — actual values live in CSS custom properties below;
+     @theme references them so Tailwind generates e.g. text-brand-navy */
+  --color-brand-navy: var(--color-brand-navy);
+  --color-brand-navy-dark: var(--color-brand-navy-dark);
+  --color-brand-amber: var(--color-brand-amber);
+  --color-brand-amber-light: var(--color-brand-amber-light);
+  --color-brand-cream: var(--color-brand-cream);
+
+  /* Surface colors */
+  --color-surface-base: var(--color-bg-base);
+  --color-surface-card: var(--color-bg-card);
+  --color-surface-card-warm: var(--color-bg-card-warm);
+  --color-surface-subtle: var(--color-bg-subtle);
+  --color-surface-hover: var(--color-bg-hover);
+
+  /* Content (text) colors */
+  --color-content-primary: var(--color-text-primary);
+  --color-content-secondary: var(--color-text-secondary);
+  --color-content-tertiary: var(--color-text-tertiary);
+  --color-content-muted: var(--color-text-muted);
+  --color-content-inverse: var(--color-text-inverse);
+
+  /* Border colors */
+  --color-border-light: var(--color-border-light);
+  --color-border-DEFAULT: var(--color-border-default);
+  --color-border-strong: var(--color-border-strong);
+
+  /* Accent colors */
+  --color-accent-primary: var(--color-accent-primary);
+  --color-accent-primary-hover: var(--color-accent-primary-hover);
+  --color-accent-forward: var(--color-accent-forward);
+  --color-accent-forward-bg: var(--color-accent-forward-bg);
+
+  /* Feedback — error */
+  --color-feedback-error-bg: var(--color-feedback-error-bg);
+  --color-feedback-error-border: var(--color-feedback-error-border);
+  --color-feedback-error-text: var(--color-feedback-error-text);
+  --color-feedback-error-icon: var(--color-feedback-error-icon);
+
+  /* Feedback — warning */
+  --color-feedback-warning-bg: var(--color-feedback-warning-bg);
+  --color-feedback-warning-border: var(--color-feedback-warning-border);
+  --color-feedback-warning-text: var(--color-feedback-warning-text);
+  --color-feedback-warning-icon: var(--color-feedback-warning-icon);
+
+  /* Feedback — info */
+  --color-feedback-info-bg: var(--color-feedback-info-bg);
+  --color-feedback-info-border: var(--color-feedback-info-border);
+  --color-feedback-info-text: var(--color-feedback-info-text);
+  --color-feedback-info-icon: var(--color-feedback-info-icon);
+
+  /* Feedback — success */
+  --color-feedback-success-bg: var(--color-feedback-success-bg);
+  --color-feedback-success-border: var(--color-feedback-success-border);
+  --color-feedback-success-text: var(--color-feedback-success-text);
+  --color-feedback-success-icon: var(--color-feedback-success-icon);
+}
 
 html {
   font-size: 16px;

vite.config.ts

@@ -4,6 +4,7 @@
 /// <reference types="vitest" />
 import { execSync } from "node:child_process";
 import { defineConfig, type Plugin } from "vite";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 
 // Build identity. CI sets GITHUB_SHA (push to main → the deployed commit); a
@@ -44,7 +45,7 @@ function emitVersionJson(version: string): Plugin {
 
 export default defineConfig({
   base: "/resumelint/",
-  plugins: [react(), emitVersionJson(APP_VERSION)],
+  plugins: [tailwindcss(), react(), emitVersionJson(APP_VERSION)],
   define: {
     __BUILD_DATE__: JSON.stringify(new Date().toISOString()),
     __APP_VERSION__: JSON.stringify(APP_VERSION),