feat: Update tailwindcss to v4

cspell.config.yaml

@@ -33,7 +33,6 @@ words:
   - anrechnungEcts
   - anzahl
   - Ausb
-  - Ausb
   - BBVT
   - Bedevere
   - bemerkung
@@ -148,6 +147,7 @@ words:
   - Studenthub
   - Stundenplanänderung
   - Stundenplanänderungen
+  - tailwindcss
   - telefon
   - TIMEBOX
   - timecell

package.json

@@ -15,10 +15,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@tailwindcss/vite": "^4.1.7",
     "globals": "^16.1.0",
     "leaflet": "^1.9.4",
     "mermaid": "^11.6.0",
     "pinia": "^3.0.2",
+    "tailwindcss": "^4.1.7",
     "typescript-eslint": "^8.32.1",
     "vue": "^3.5.14",
     "vue-router": "^4.5.1",
@@ -33,8 +35,6 @@
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-vue": "^10.1.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.13",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vue-tsc": "^2.2.10"

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

src/components/general/ClassFilter.vue

@@ -258,6 +258,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply h-5
     text-xs
@@ -278,7 +280,7 @@ export default {
     dark:disabled:text-gray-600
     disabled:pointer-events-none
     aspect-square
-    rounded
+    rounded-sm
     transition-all
     duration-200;
 }
@@ -302,7 +304,7 @@ export default {
     dark:disabled:text-gray-600
     disabled:pointer-events-none
     aspect-square
-    rounded
+    rounded-sm
     transition-all
     duration-200
     items-center

src/components/general/ClassInfo.vue

@@ -287,6 +287,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply text-center
     bg-gray-200
@@ -295,7 +297,7 @@ export default {
     dark:bg-gray-600
     dark:hover:bg-gray-700
     dark:active:bg-gray-900
-    rounded
+    rounded-sm
     cursor-pointer
     w-full
     p-0

src/components/general/ClassRemovedRow.vue

@@ -132,6 +132,8 @@ export default {
 </script>
 
 <style>
+@reference "../../style.css";
+
 .upgrade-module-table thead td {
   @apply border-b border-gray-700 h-8 text-gray-500 font-bold;
 }
@@ -153,6 +155,8 @@ export default {
 </style>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply h-5
     text-xs
@@ -171,7 +175,7 @@ export default {
     dark:disabled:text-gray-600
     disabled:pointer-events-none
     aspect-square
-    rounded
+    rounded-sm
     transition-all
     duration-200;
 }

src/components/general/ClassRow.vue

@@ -153,9 +153,12 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .row {
   @apply border-b
     cursor-pointer
+    border-gray-300
     dark:border-gray-500
     hover:bg-slate-200
     dark:hover:bg-gray-700

src/components/general/CurrentModuleExecutions.vue

@@ -2,7 +2,7 @@
   <table class="w-full">
     <thead>
       <tr
-        class="border-b dark:border-gray-500 font-bold bg-gray-200 h-10 dark:bg-gray-500 dark:text-white"
+        class="border-b border-gray-300 dark:border-gray-500 font-bold bg-gray-200 h-10 dark:bg-gray-500 dark:text-white"
       >
         <td>Zeit</td>
         <td>Klasse</td>

src/components/general/CurrentModuleExecutionsRow.vue

@@ -115,8 +115,11 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .row {
   @apply border-b
+  border-gray-300
     dark:border-gray-500
     hover:bg-slate-200
     dark:hover:bg-gray-700

src/components/general/DependencyTree.vue

@@ -168,10 +168,12 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .module-box {
   @apply w-28
     py-2
-    rounded
+    rounded-sm
     text-center
     hover:bg-gray-300
     active:bg-gray-400
@@ -190,7 +192,7 @@ export default {
     dark:bg-gray-600
     dark:hover:bg-gray-700
     dark:active:bg-gray-900
-    rounded
+    rounded-sm
     cursor-pointer
     px-2
     py-0.5

src/components/general/ModuleInfo.vue

@@ -254,6 +254,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply text-center
     bg-gray-200
@@ -262,7 +264,7 @@ export default {
     dark:bg-gray-600
     dark:hover:bg-gray-700
     dark:active:bg-gray-900
-    rounded
+    rounded-sm
     cursor-pointer
     w-6
     p-0

src/components/general/ModulesetManager.vue

@@ -67,7 +67,7 @@
       <font-awesome-icon icon="fa-solid fa-cog" />
     </button>
   </div>
-  <hr class="my-2 dark:border-zinc-600">
+  <hr class="my-2 border-gray-300 dark:border-zinc-600">
 
   <ModuleSetEdit
     :moduleset-name="editingModuleSet"
@@ -162,6 +162,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply w-10
     mx-1
@@ -170,7 +172,7 @@ export default {
     dark:hover:bg-gray-600
     dark:active:bg-gray-700
     aspect-square
-    rounded
+    rounded-sm
     transition-all
     duration-200;
 }

src/components/general/NumberedPagination.vue

@@ -29,7 +29,7 @@
             v-if="idx == null"
             class="px-3 md:px-4 text-gray-600 dark:text-gray-400"
           >&middot;&middot;&middot;</span>
-          <!-- class="cursor-pointer py-1.5 px-3 md:px-4 rounded border-0 outline-none transition-all duration-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:shadow-none" -->
+          <!-- class="cursor-pointer py-1.5 px-3 md:px-4 rounded-sm border-0 outline-hidden transition-all duration-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:shadow-none" -->
           <button
             v-else
             :title="`Auf die ${idx}. Seite springen`"
@@ -125,15 +125,17 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .pagination-button {
   @apply cursor-pointer
     py-1.5
     px-2.5
     mx-0.5
     md:px-4
-    rounded
+    rounded-sm
     border-0
-    outline-none
+    outline-hidden
     transition-all
     duration-200
     hover:bg-gray-200

src/components/general/PreviousModuleExecutionsRow.vue

@@ -66,8 +66,11 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .row {
   @apply border-b
+  border-gray-300
    dark:border-gray-500
     hover:bg-slate-100
     dark:hover:bg-gray-700

src/components/layout/HeaderBar.vue

@@ -65,7 +65,7 @@
           style="border: 0px solid transparent; margin: 0px"
         >
           <span
-            class="p-1 px-2 ml-2 rounded inline text-xs md:text-sm font-mono"
+            class="p-1 px-2 ml-2 rounded-sm inline text-xs md:text-sm font-mono"
             :class="[
               classVersionStore.isLatestSemesterVersion
                 ? 'bg-gray-700 cursor-help'
@@ -152,6 +152,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .pulsating-orange {
   animation-name: color;
   animation-duration: 1s;

src/components/modals/AdditionalInfo.vue

@@ -298,6 +298,8 @@ export default {
 </script>
 
 <style>
+@reference "../../style.css";
+
 #repo-changelog h1,
 #timetable-changelog h1 {
   @apply text-lg font-bold;
@@ -322,13 +324,15 @@ export default {
 </style>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply text-center
     hover:bg-gray-200
     active:bg-gray-300
     dark:hover:bg-gray-700
     dark:active:bg-gray-900
-    rounded
+    rounded-sm
     cursor-pointer
     w-7
     aspect-square
@@ -338,7 +342,7 @@ export default {
 }
 
 .view-button {
-  @apply rounded
+  @apply rounded-sm
   w-full
   py-2
   text-center

src/components/modals/BaseModal.vue

@@ -13,7 +13,7 @@
     "
   >
     <div
-      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity cursor-pointer"
+      class="fixed inset-0 bg-gray-500/75 transition-opacity cursor-pointer"
     />
 
     <div class="fixed inset-0 z-10 overflow-y-auto">
@@ -63,6 +63,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .close-button {
   @apply absolute
     right-1

src/components/modals/ClassUpdateModal.vue

@@ -112,5 +112,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>

src/components/modals/ModuleSearchModal.vue

@@ -168,6 +168,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .module-entry {
   @apply flex
     items-center
@@ -181,7 +183,7 @@ export default {
     my-2
     py-1
     px-5
-    rounded
+    rounded-sm
     cursor-pointer
     transition-all
     duration-200;

src/components/modals/ModulesetEdit.vue

@@ -27,7 +27,7 @@
       <button
         v-if="!isNew"
         title="Neue leere Planung erstellen"
-        class="bg-red-500 text-white py-2 w-1/3 rounded mx-1"
+        class="bg-red-500 text-white py-2 w-1/3 rounded-xs mx-1"
         @click="emptyModuleSet"
       >
         Leeren
@@ -35,7 +35,7 @@
       <button
         v-if="!isNew"
         title="Momentane Planung kopieren"
-        class="bg-pink-500 text-white py-2 w-1/3 rounded mx-1"
+        class="bg-pink-500 text-white py-2 w-1/3 rounded-xs mx-1"
         @click="copyModuleSet"
       >
         Kopieren
@@ -44,7 +44,7 @@
         :title="
           isNew ? 'Neue Planung jetzt erstellen' : 'Änderungen abspeichern'
         "
-        class="bg-green-500 text-white py-2 w-1/3 rounded mx-1"
+        class="bg-green-500 text-white py-2 w-1/3 rounded-xs mx-1"
         @click="saveModuleSet"
       >
         {{ isNew ? "Erstellen" : "Speichern" }}

src/components/modals/OldSemesterReminderModal.vue

@@ -63,5 +63,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>

src/components/modals/PersonalEventEdit.vue

@@ -81,7 +81,7 @@ import BaseModal from './BaseModal.vue';
         </button>
         <input
           type="submit"
-          class="bg-green-500 text-white py-2 px-5 rounded active:bg-green-600"
+          class="bg-green-500 text-white py-2 px-5 rounded-sm active:bg-green-600"
           :value="isNew ? 'Einfügen' : 'Speichern'"
         >
       </div>
@@ -192,5 +192,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>

src/components/modals/RightDrawer.vue

@@ -14,11 +14,11 @@
   >
     <div
       ref="modal"
-      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity cursor-pointer"
+      class="fixed inset-0 bg-gray-500/75 transition-opacity cursor-pointer"
     />
 
     <div
-      class="fixed bottom-0 flex flex-col max-w-full bg-white dark:bg-gray-800 bg-clip-padding drop-shadow-2xl outline-none transition duration-300 ease-in-out top-0 right-0 border-none"
+      class="fixed bottom-0 flex flex-col max-w-full bg-white dark:bg-gray-800 bg-clip-padding drop-shadow-2xl outline-hidden transition duration-300 ease-in-out top-0 right-0 border-none"
       style="width: 30rem"
       tabindex="-1"
     >
@@ -58,6 +58,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .close-button {
   @apply absolute
     right-1

src/components/pages/404Page.vue

@@ -74,6 +74,8 @@ const randomQuote = computed(() => {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .action-button {
   @apply text-center
     text-gray-700
@@ -84,7 +86,7 @@ const randomQuote = computed(() => {
     dark:bg-gray-600
     dark:hover:bg-gray-700
     dark:active:bg-gray-900
-    rounded
+    rounded-sm
     cursor-pointer
     py-2
     px-5

src/components/views/CalendarView.vue

@@ -527,6 +527,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 table {
   --border-colour: #999;
 }
@@ -558,7 +560,7 @@ td {
     absolute
     left-0
     overflow-hidden
-    rounded
+    rounded-sm
     transition-all
     duration-200;
 }
@@ -578,7 +580,7 @@ td {
     absolute
     left-0
     overflow-hidden
-    rounded
+    rounded-sm
     transition-all
     duration-200;
 }
@@ -590,7 +592,7 @@ td {
     dark:bg-gray-700
     dark:hover:bg-gray-800
     dark:active:bg-gray-900
-    rounded
+    rounded-sm
     cursor-pointer
     py-0.5 px-3
     transition-all

src/components/views/ClassUpdateView.vue

@@ -189,5 +189,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>

src/components/views/FullDependencyTree.vue

@@ -253,13 +253,17 @@ export default {
 </script>
 
 <style>
+@reference "../../style.css";
 .leaflet-container {
   @apply bg-gray-100 dark:bg-gray-800;
 }
 </style>
+
 <style scoped>
+@reference "../../style.css";
+
 .lang-button {
-  @apply rounded
+  @apply rounded-sm
   w-full
   py-2
   bg-gray-100

src/components/views/ModuleSelector.vue

@@ -26,7 +26,7 @@
   >
     <thead>
       <tr
-        class="border-b dark:border-gray-500 font-bold bg-gray-200 h-10 dark:bg-gray-500 dark:text-white"
+        class="border-b border-gray-300 dark:border-gray-500 font-bold bg-gray-200 h-10 dark:bg-gray-500 dark:text-white"
       >
         <td>
           <OrderingControl
@@ -199,6 +199,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../style.css";
+
 .no-results-text::after {
   @apply bg-gray-600 dark:bg-gray-300;
   content: "";
@@ -232,7 +234,7 @@ export default {
     dark:disabled:bg-gray-800
     dark:disabled:text-gray-600
     disabled:pointer-events-none
-    rounded
+    rounded-sm
     transition-all
     duration-200;
 }

src/style.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 @layer components {
   input {
@@ -23,7 +21,7 @@
       focus:bg-white
       focus:dark:bg-zinc-800
       focus:border-blue-600
-      focus:outline-none;
+      focus:outline-hidden;
   }
 
   select {
@@ -46,7 +44,7 @@
       focus:bg-white
       focus:dark:bg-zinc-800
       focus:border-blue-600
-      focus:outline-none;
+      focus:outline-hidden;
   }
 
   .external-link {

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
   build: {
     chunkSizeWarningLimit: 1400,
     rollupOptions: {