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

fix: attempt tailwind build

Author: kolaente

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

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

frontend/src/App.vue

@@ -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/main.ts

@@ -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/src/styles/global.scss

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

frontend/tailwind.config.js

@@ -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/