chore(deps): update tailwindcss to v4

Switch to the @tailwindcss/vite plugin and the @import entry. Load the existing config with @config and keep class-based dark mode through a custom variant. Remove the postcss config and its autoprefixer dependency, which v4 no longer needs.

frontend/package.json

@@ -27,14 +27,13 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^7.1.0",
     "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/test-utils": "^2.4.6",
-    "autoprefixer": "^10.4.23",
     "jsdom": "^30.0.0",
-    "postcss": "^8.5.23",
+    "tailwindcss": "^4.3.3",
-    "tailwindcss": "^3.4.19",
     "typescript": "^6.0.3",
     "vite": "^8.0.0",
     "vitest": "^5.0.3",

frontend/postcss.config.js

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

frontend/src/styles/main.css

@@ -1,8 +1,8 @@
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+@config '../../tailwind.config.js';
-@tailwind utilities;
+@custom-variant dark (&:is(.dark *));
 
 @layer base {
   :root {

frontend/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
 // Get backend URL from environment or use default
@@ -7,7 +8,7 @@ const BACKEND_URL = process.env.VITE_BACKEND_URL || 'http://localhost:8080'
 const FRONTEND_PORT = parseInt(process.env.VITE_PORT || '5173')
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),