chore(deps): upgrade to Tailwind 4 (#1019)

fix: attempt tailwind build

frontend/package.json

@@ -114,6 +114,8 @@
     "@faker-js/faker": "9.8.0",
     "@histoire/plugin-screenshot": "1.0.0-alpha.2",
     "@histoire/plugin-vue": "1.0.0-alpha.2",
+    "@tailwindcss/postcss": "4.1.8",
+    "@tailwindcss/vite": "4.1.8",
     "@tsconfig/node22": "22.0.2",
     "@types/codemirror": "5.60.16",
     "@types/is-touch-device": "1.0.3",
@@ -125,7 +127,6 @@
     "@vue/eslint-config-typescript": "14.5.1",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.7.0",
-    "@tailwindcss/vite": "4.1.8",
     "browserslist": "4.25.0",
     "caniuse-lite": "1.0.30001724",
     "csstype": "3.1.3",

frontend/pnpm-lock.yaml

@@ -212,6 +212,9 @@ importers:
       '@histoire/plugin-vue':
         specifier: 1.0.0-alpha.2
         version: 1.0.0-alpha.2(histoire@1.0.0-alpha.2(@types/node@22.15.33)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.80.6)(terser@5.31.6)(vite@6.3.5(@types/node@22.15.33)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)))(vite@6.3.5(@types/node@22.15.33)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.17(typescript@5.8.3))
+      '@tailwindcss/postcss':
+        specifier: 4.1.8
+        version: 4.1.8
       '@tailwindcss/vite':
         specifier: 4.1.8
         version: 4.1.8(vite@6.3.5(@types/node@22.15.33)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
@@ -341,6 +344,10 @@ packages:
     resolution: {integrity: sha512-nznEC1ZA/m3hQDEnrGQ4c5gkaa9pcaVnw4LFJyzBAaR7E3nfiAPEHS3otnSafpZouVnoKeITl5D+2LsnwlnK8g==}
     engines: {node: '>=14.0.0'}
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -2265,6 +2272,9 @@ packages:
     resolution: {integrity: sha512-d7qvv9PsM5N3VNKhwVUhpK6r4h9wtLkJ6lz9ZY9aeZgrUWk1Z8VPyqyDT9MZlem7GTGseRQHkeB1j3tC7W1P+A==}
     engines: {node: '>= 10'}
 
+  '@tailwindcss/postcss@4.1.8':
+    resolution: {integrity: sha512-vB/vlf7rIky+w94aWMw34bWW1ka6g6C3xIOdICKX2GC0VcLtL6fhlLiafF0DVIwa9V6EHz8kbWMkS2s2QvvNlw==}
+
   '@tailwindcss/vite@4.1.8':
     resolution: {integrity: sha512-CQ+I8yxNV5/6uGaJjiuymgw0kEQiNKRinYbZXPdx1fk5WgiyReG0VaUx/Xq6aVNSUNJFzxm6o8FNKS5aMaim5A==}
     peerDependencies:
@@ -7019,6 +7029,8 @@ snapshots:
 
   '@akryum/tinypool@0.3.1': {}
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -9010,6 +9022,14 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
 
+  '@tailwindcss/postcss@4.1.8':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.8
+      '@tailwindcss/oxide': 4.1.8
+      postcss: 8.5.6
+      tailwindcss: 4.1.8
+
   '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@22.15.33)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))':
     dependencies:
       '@tailwindcss/node': 4.1.8

frontend/src/App.vue

@@ -92,4 +92,3 @@ setLanguage(authStore.settings.language)
 useColorScheme()
 </script>
 
-<style lang="scss" src="@/styles/global.scss" />

frontend/src/main.ts

@@ -38,6 +38,8 @@ if (window.API_URL.endsWith('/')) {
 // directives
 import focus from '@/directives/focus'
 import {vTooltip} from 'floating-vue'
+
+import './styles/global.scss'
 import 'floating-vue/dist/style.css'
 import shortcut from '@/directives/shortcut'
 import cypress from '@/directives/cypress'

frontend/src/styles/global.scss

@@ -1,7 +1,6 @@
 @config "../../tailwind.config.js";
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
+@tailwind theme;
+@tailwind utilities;
 
 @import "fonts";
 

frontend/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   prefix: 'tw-',
   content: [
     './index.html',

frontend/vite.config.ts

@@ -111,7 +111,7 @@ function getBuildConfig(env: Record<string, string>) {
 			},
 		},
                 plugins: [
-                        tailwindcss(),
+                        tailwindcss({config: './tailwind.config.js'}),
                         vue(),
 			svgLoader({
 				// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/