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

fix: attempt tailwind build

frontend/package.json

@@ -95,7 +95,7 @@
     "pinia": "3.0.3",
     "register-service-worker": "1.7.2",
     "sortablejs": "1.15.6",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.8",
     "tippy.js": "6.3.7",
     "ufo": "1.6.1",
     "vue": "3.5.17",
@@ -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",
-    "autoprefixer": "10.4.21",
     "browserslist": "4.25.0",
     "caniuse-lite": "1.0.30001724",
     "csstype": "3.1.3",

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,5 +1,5 @@
-@tailwind base;
-@tailwind components;
+@config "../../tailwind.config.js";
+@tailwind theme;
 @tailwind utilities;
 
 @import "fonts";

frontend/tailwind.config.js

@@ -1,9 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  corePlugins: {
-    // TODO: Readd after removing bulma base styles
-    preflight: false,
-  },
+export default {
   prefix: 'tw-',
   content: [
     './index.html',

frontend/vite.config.ts

@@ -14,7 +14,7 @@ import viteSentry, {type ViteSentryPluginOptions} from 'vite-plugin-sentry'
 import svgLoader from 'vite-svg-loader'
 import postcssPresetEnv from 'postcss-preset-env'
 import postcssEasingGradients from 'postcss-easing-gradients'
-import tailwindcss from 'tailwindcss'
+import tailwindcss from '@tailwindcss/vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 const pathSrc = fileURLToPath(new URL('./src', import.meta.url)).replaceAll('\\', '/')
@@ -104,15 +104,15 @@ function getBuildConfig(env: Record<string, string>) {
 				},
 			},
 			postcss: {
-				plugins: [
-					tailwindcss(),
-					postcssEasingGradients(),
-					postcssPresetEnv(),
-				],
+                                plugins: [
+                                        postcssEasingGradients(),
+                                        postcssPresetEnv(),
+                                ],
 			},
 		},
-		plugins: [
-			vue(),
+                plugins: [
+                        tailwindcss({config: './tailwind.config.js'}),
+                        vue(),
 			svgLoader({
 				// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
 				// we don't need to optimize them again.