Upgrade to Tailwind CSS v4

.pi-lens/cache/jscpd.json

@@ -2,6 +2,6 @@
   "success": true,
   "clones": [],
   "duplicatedLines": 0,
-  "totalLines": 684,
+  "totalLines": 681,
   "percentage": 0
 }

.pi-lens/cache/jscpd.meta.json

@@ -1,3 +1,3 @@
 {
-  "timestamp": "2026-04-18T19:51:40.225Z"
+  "timestamp": "2026-04-18T19:53:09.821Z"
 }

.pi-lens/cache/knip.meta.json

@@ -1,3 +1,3 @@
 {
-  "timestamp": "2026-04-18T19:51:41.484Z"
+  "timestamp": "2026-04-18T19:53:11.171Z"
 }

.pi-lens/cache/turn-end-findings-last.json

@@ -1,3 +1,3 @@
 {
-  "signature": "src/styles.css::📐 Cascade errors in 2 other file(s) — fix before finishing turn:\n<diagnostics file=\"src/App.tsx\">\n  line 4, col 24 code=2307: Cannot find module './sections/Philosophy' or its corresponding type declarations.\n</diagnostics>\n<diagnostics file=\"src/sections/SkillsGallery.tsx\">\n  line 1, col 41 code=2307: Cannot find module 'lucide-react' or its corresponding type declarations.\n</diagnostics>"
+  "signature": "postcss.config.js|src/styles.css::📐 Cascade errors in 1 other file(s) — fix before finishing turn:\n<diagnostics file=\"src/styles.css\">\n  line 1, col 2 code=lint/suspicious/noUnknownAtRules: Unexpected unknown at-rule: tailwind \n  line 2, col 2 code=lint/suspicious/noUnknownAtRules: Unexpected unknown at-rule: tailwind \n  line 3, col 2 code=lint/suspicious/noUnknownAtRules: Unexpected unknown at-rule: tailwind \n</diagnostics>"
 }

.pi-lens/cache/turn-end-findings-last.meta.json

@@ -1,3 +1,3 @@
 {
-  "timestamp": "2026-04-18T19:12:28.804Z"
+  "timestamp": "2026-04-18T19:53:03.908Z"
 }

.pi-lens/cache/turn-end-findings.meta.json

@@ -1,3 +1,3 @@
 {
-  "timestamp": "2026-04-18T19:12:31.358Z"
+  "timestamp": "2026-04-18T19:53:09.823Z"
 }

.pi-lens/turn-state.json

@@ -2,5 +2,5 @@
   "files": {},
   "turnCycles": 0,
   "maxCycles": 3,
-  "lastUpdated": "2026-04-18T19:51:41.484Z"
+  "lastUpdated": "2026-04-18T19:53:11.171Z"
 }

package.json

@@ -19,6 +19,7 @@
     "react-dom": "^19.2.5"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
@@ -28,7 +29,7 @@
     "lucide-react": "^1.8.0",
     "mammoth": "^1.12.0",
     "postcss": "^8.5.10",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.2",
     "tesseract.js": "^7.0.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.8"

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

src/styles.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   color-scheme: light;