From 815d5c16fa33a7136cb3d4bc1faf1ac12e054111 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 12 Apr 2025 15:17:44 +0200
Subject: [PATCH] upgrade tailwind

---
 postcss.config.js                             |  6 -----
 src/components/Header.vue                     |  2 +-
 src/components/Pagination.vue                 |  2 +-
 src/components/UserMenu.vue                   |  2 +-
 src/components/admin/MemberSearchSelect.vue   |  4 +--
 src/components/admin/Permission.vue           |  4 +--
 .../admin/club/calendar/CalendarLinkModal.vue |  4 +--
 .../club/calendar/CreateCalendarModal.vue     |  4 +--
 .../club/calendar/UpdateCalendarModal.vue     |  8 +++---
 .../admin/club/member/CreateMemberModal.vue   |  4 +--
 .../club/member/MemberAwardCreateModal.vue    |  4 +--
 .../club/member/MemberAwardEditModal.vue      |  4 +--
 .../member/MemberCommunicationCreateModal.vue |  4 +--
 .../MemberExecutivePositionCreateModal.vue    |  4 +--
 .../MemberExecutivePositionEditModal.vue      |  4 +--
 .../admin/club/member/MemberPrintModal.vue    |  4 +--
 .../member/MemberQualificationCreateModal.vue |  4 +--
 .../member/MemberQualificationEditModal.vue   |  4 +--
 .../club/member/MembershipCreateModal.vue     |  4 +--
 .../admin/club/member/MembershipEditModal.vue |  4 +--
 .../newsletter/NewsletterPreviewModal.vue     |  2 +-
 .../protocol/ProtocolPrintoutViewerModal.vue  |  2 +-
 .../calendarType/CreateCalendarTypeModal.vue  |  2 +-
 .../CreateCommunicationTypeModal.vue          |  4 +--
 .../NewsletterConfigListItem.vue              |  4 +--
 .../template/TemplateListItem.vue             |  2 +-
 .../templateUsage/TemplatePreviewModal.vue    |  2 +-
 .../templateUsage/TemplateUsageListItem.vue   | 10 +++----
 .../management/backup/UploadBackupModal.vue   |  2 +-
 .../admin/management/user/InviteUserModal.vue |  8 +++---
 src/components/queryBuilder/BuilderHost.vue   |  2 +-
 src/components/queryBuilder/ColumnSelect.vue  |  4 +--
 src/components/queryBuilder/Condition.vue     |  4 +--
 .../queryBuilder/NestedCondition.vue          |  2 +-
 .../queryBuilder/StructureModal.vue           |  2 +-
 src/main.css                                  | 26 ++++++++++++-------
 src/views/Login.vue                           |  4 +--
 src/views/NoPermission.vue                    |  2 +-
 src/views/account/Administration.vue          |  8 +++---
 src/views/account/Me.vue                      |  4 +--
 src/views/admin/club/listprint/ListPrint.vue  | 10 +++----
 src/views/admin/club/members/Member.vue       |  2 +-
 src/views/admin/club/members/MemberAwards.vue |  2 +-
 .../club/members/MemberCommunication.vue      |  2 +-
 src/views/admin/club/members/MemberEdit.vue   |  8 +++---
 .../club/members/MemberExecutivePositions.vue |  2 +-
 .../club/members/MemberQualifications.vue     |  2 +-
 .../admin/club/members/MemberRouting.vue      |  4 +--
 src/views/admin/club/members/Membership.vue   |  2 +-
 .../admin/club/newsletter/Newsletter.vue      |  2 +-
 .../admin/club/newsletter/NewsletterDates.vue |  2 +-
 .../club/newsletter/NewsletterPrintout.vue    | 12 ++++-----
 .../club/newsletter/NewsletterRouting.vue     |  4 +--
 src/views/admin/club/protocol/Protocol.vue    |  2 +-
 .../admin/club/protocol/ProtocolAgenda.vue    |  2 +-
 .../admin/club/protocol/ProtocolDecisions.vue |  2 +-
 .../admin/club/protocol/ProtocolPrintout.vue  |  2 +-
 .../admin/club/protocol/ProtocolRouting.vue   |  4 +--
 .../admin/club/protocol/ProtocolVoting.vue    |  2 +-
 src/views/admin/configuration/award/Award.vue |  2 +-
 .../admin/configuration/award/AwardEdit.vue   |  4 +--
 .../calendarType/CalendarType.vue             |  2 +-
 .../calendarType/CalendarTypeEdit.vue         |  6 ++---
 .../communicationType/CommunicationType.vue   |  2 +-
 .../CommunicationTypeEdit.vue                 |  8 +++---
 .../executivePosition/ExecutivePosition.vue   |  2 +-
 .../ExecutivePositionEdit.vue                 |  4 +--
 .../membershipStatus/MembershipStatus.vue     |  2 +-
 .../membershipStatus/MembershipStatusEdit.vue |  4 +--
 .../qualification/Qualification.vue           |  2 +-
 .../qualification/QualificationEdit.vue       |  4 +--
 .../configuration/queryStore/QueryStore.vue   |  2 +-
 .../configuration/salutation/Salutation.vue   |  2 +-
 .../salutation/SalutationEdit.vue             |  4 +--
 .../admin/configuration/template/Template.vue |  2 +-
 .../configuration/template/TemplateEdit.vue   |  4 +--
 .../admin/management/backup/BackupRouting.vue |  4 +--
 .../management/backup/GeneratedBackup.vue     |  2 +-
 .../management/backup/UploadedBackup.vue      |  2 +-
 src/views/admin/management/role/Role.vue      |  2 +-
 src/views/admin/management/role/RoleEdit.vue  |  4 +--
 src/views/admin/management/user/User.vue      |  4 +--
 src/views/admin/management/user/UserEdit.vue  |  4 +--
 .../admin/management/user/UserEditRoles.vue   |  4 +--
 src/views/admin/management/webapi/Webapi.vue  |  2 +-
 .../admin/management/webapi/WebapiEdit.vue    |  4 +--
 src/views/notFound.vue                        |  2 +-
 src/views/setup/Setup.vue                     |  8 +++---
 tailwind.config.js                            | 18 -------------
 89 files changed, 172 insertions(+), 188 deletions(-)
 delete mode 100644 postcss.config.js
 delete mode 100644 tailwind.config.js

diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 2e7af2b..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 858b963..d2235fa 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
+  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-xs">
     <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
       <img src="/Logo.png" alt="LOGO" class="h-full w-auto" />
       <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index 83210a7..d983299 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -4,7 +4,7 @@
       <Spinner v-if="deferingSearch" />
       <input
         type="text"
-        class="!max-w-64 !w-64 rounded-md shadow-sm relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+        class="max-w-64! w-64! rounded-md shadow-xs relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
         placeholder="Suche"
         v-model="searchString"
       />
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 51aefc4..08ac8ab 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -13,7 +13,7 @@
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="absolute right-0 mt-2 w-56 z-20 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="absolute right-0 mt-2 w-56 z-20 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden"
       >
         <div class="px-3 py-1 pt-2">
           <p class="text-xs">Angemeldet als</p>
diff --git a/src/components/admin/MemberSearchSelect.vue b/src/components/admin/MemberSearchSelect.vue
index 1522d31..50efd6f 100644
--- a/src/components/admin/MemberSearchSelect.vue
+++ b/src/components/admin/MemberSearchSelect.vue
@@ -4,7 +4,7 @@
       <ComboboxLabel>{{ title }}</ComboboxLabel>
       <div class="relative mt-1">
         <ComboboxInput
-          class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
           @input="query = $event.target.value"
         />
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
@@ -17,7 +17,7 @@
           @after-leave="query = ''"
         >
           <ComboboxOptions
-            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
           >
             <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
               <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
diff --git a/src/components/admin/Permission.vue b/src/components/admin/Permission.vue
index 31b1060..9be7f19 100644
--- a/src/components/admin/Permission.vue
+++ b/src/components/admin/Permission.vue
@@ -69,8 +69,8 @@
       </div>
     </div>
     <div v-if="!disableEdit" class="flex flex-row gap-2 self-end pt-4">
-      <button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
-      <button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
+      <button primary-outline class="w-fit!" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
+      <button primary class="w-fit!" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
         speichern
       </button>
       <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/components/admin/club/calendar/CalendarLinkModal.vue b/src/components/admin/club/calendar/CalendarLinkModal.vue
index 93b051c..917fa02 100644
--- a/src/components/admin/club/calendar/CalendarLinkModal.vue
+++ b/src/components/admin/club/calendar/CalendarLinkModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Typen zur Anzeige auswählen</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/calendar/CreateCalendarModal.vue b/src/components/admin/club/calendar/CreateCalendarModal.vue
index 6256bb7..9eb7606 100644
--- a/src/components/admin/club/calendar/CreateCalendarModal.vue
+++ b/src/components/admin/club/calendar/CreateCalendarModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Termintyp</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -28,7 +28,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/calendar/UpdateCalendarModal.vue b/src/components/admin/club/calendar/UpdateCalendarModal.vue
index e654ca8..8ccddd3 100644
--- a/src/components/admin/club/calendar/UpdateCalendarModal.vue
+++ b/src/components/admin/club/calendar/UpdateCalendarModal.vue
@@ -17,7 +17,7 @@
           <ListboxLabel>Termintyp</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -35,7 +35,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
@@ -152,10 +152,10 @@
       </div>
 
       <div class="flex flex-row gap-2">
-        <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
           verwerfen
         </button>
-        <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
           speichern
         </button>
         <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/components/admin/club/member/CreateMemberModal.vue b/src/components/admin/club/member/CreateMemberModal.vue
index e56b67d..bf5c537 100644
--- a/src/components/admin/club/member/CreateMemberModal.vue
+++ b/src/components/admin/club/member/CreateMemberModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Anrede</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -24,7 +24,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption
                   v-slot="{ active, selected }"
diff --git a/src/components/admin/club/member/MemberAwardCreateModal.vue b/src/components/admin/club/member/MemberAwardCreateModal.vue
index 67e8c7f..17d06e3 100644
--- a/src/components/admin/club/member/MemberAwardCreateModal.vue
+++ b/src/components/admin/club/member/MemberAwardCreateModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Auszeichnung</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{ awards.length != 0 ? (selectedAward?.award ?? "bitte auswählen") : "keine Auswahl vorhanden" }}</span
@@ -26,7 +26,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="awards.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MemberAwardEditModal.vue b/src/components/admin/club/member/MemberAwardEditModal.vue
index ff977d2..2c79f4d 100644
--- a/src/components/admin/club/member/MemberAwardEditModal.vue
+++ b/src/components/admin/club/member/MemberAwardEditModal.vue
@@ -12,7 +12,7 @@
           <ListboxLabel>Auszeichnung</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{ awards.length != 0 ? (selectedAward ?? "bitte auswählen") : "keine Auswahl vorhanden" }}</span
@@ -28,7 +28,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="awards.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MemberCommunicationCreateModal.vue b/src/components/admin/club/member/MemberCommunicationCreateModal.vue
index ba45472..19165c4 100644
--- a/src/components/admin/club/member/MemberCommunicationCreateModal.vue
+++ b/src/components/admin/club/member/MemberCommunicationCreateModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Kommunikationsart</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="communicationTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MemberExecutivePositionCreateModal.vue b/src/components/admin/club/member/MemberExecutivePositionCreateModal.vue
index 03f3fe0..0e17963 100644
--- a/src/components/admin/club/member/MemberExecutivePositionCreateModal.vue
+++ b/src/components/admin/club/member/MemberExecutivePositionCreateModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Qualifikation</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="executivePositions.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MemberExecutivePositionEditModal.vue b/src/components/admin/club/member/MemberExecutivePositionEditModal.vue
index e59292a..a153925 100644
--- a/src/components/admin/club/member/MemberExecutivePositionEditModal.vue
+++ b/src/components/admin/club/member/MemberExecutivePositionEditModal.vue
@@ -12,7 +12,7 @@
           <ListboxLabel>Auszeichnung</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -32,7 +32,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="executivePositions.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MemberPrintModal.vue b/src/components/admin/club/member/MemberPrintModal.vue
index 6558751..6a2b7dd 100644
--- a/src/components/admin/club/member/MemberPrintModal.vue
+++ b/src/components/admin/club/member/MemberPrintModal.vue
@@ -6,8 +6,8 @@
     </div>
 
     <div class="flex flex-row gap-2 justify-end">
-      <a ref="download" button primary class="!w-fit">download</a>
-      <button primary-outline class="!w-fit" @click="closeModal">schließen</button>
+      <a ref="download" button primary class="w-fit!">download</a>
+      <button primary-outline class="w-fit!" @click="closeModal">schließen</button>
     </div>
   </div>
 </template>
diff --git a/src/components/admin/club/member/MemberQualificationCreateModal.vue b/src/components/admin/club/member/MemberQualificationCreateModal.vue
index 817e452..2079b17 100644
--- a/src/components/admin/club/member/MemberQualificationCreateModal.vue
+++ b/src/components/admin/club/member/MemberQualificationCreateModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Qualifikation</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="qualifications.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MemberQualificationEditModal.vue b/src/components/admin/club/member/MemberQualificationEditModal.vue
index 6355561..7034b83 100644
--- a/src/components/admin/club/member/MemberQualificationEditModal.vue
+++ b/src/components/admin/club/member/MemberQualificationEditModal.vue
@@ -12,7 +12,7 @@
           <ListboxLabel>Qualifikation</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="qualifications.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MembershipCreateModal.vue b/src/components/admin/club/member/MembershipCreateModal.vue
index 48aa0f9..146d683 100644
--- a/src/components/admin/club/member/MembershipCreateModal.vue
+++ b/src/components/admin/club/member/MembershipCreateModal.vue
@@ -10,7 +10,7 @@
           <ListboxLabel>Status</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="membershipStatus.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/member/MembershipEditModal.vue b/src/components/admin/club/member/MembershipEditModal.vue
index a376800..8b28ae9 100644
--- a/src/components/admin/club/member/MembershipEditModal.vue
+++ b/src/components/admin/club/member/MembershipEditModal.vue
@@ -12,7 +12,7 @@
           <ListboxLabel>Status</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="membershipStatus.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
diff --git a/src/components/admin/club/newsletter/NewsletterPreviewModal.vue b/src/components/admin/club/newsletter/NewsletterPreviewModal.vue
index c5b3b4a..2d9b4ab 100644
--- a/src/components/admin/club/newsletter/NewsletterPreviewModal.vue
+++ b/src/components/admin/club/newsletter/NewsletterPreviewModal.vue
@@ -5,7 +5,7 @@
       <iframe ref="viewer" class="w-full h-full" />
     </div>
 
-    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+    <button primary-outline class="w-fit! self-end" @click="closeModal">schließen</button>
   </div>
 </template>
 
diff --git a/src/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue b/src/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue
index 7fca129..fc737d8 100644
--- a/src/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue
+++ b/src/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue
@@ -4,7 +4,7 @@
       <iframe ref="viewer" class="w-full h-full" />
     </div>
 
-    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+    <button primary-outline class="w-fit! self-end" @click="closeModal">schließen</button>
   </div>
 </template>
 
diff --git a/src/components/admin/configuration/calendarType/CreateCalendarTypeModal.vue b/src/components/admin/configuration/calendarType/CreateCalendarTypeModal.vue
index 7f8688a..f1bb454 100644
--- a/src/components/admin/configuration/calendarType/CreateCalendarTypeModal.vue
+++ b/src/components/admin/configuration/calendarType/CreateCalendarTypeModal.vue
@@ -10,7 +10,7 @@
         <input type="text" id="type" required />
       </div>
       <div class="flex flex-row items-center gap-2">
-        <input type="color" id="color" required class="!px-1 !py-0 !w-10" />
+        <input type="color" id="color" required class="px-1! py-0! w-10!" />
         <label for="color">Farbe</label>
       </div>
       <div class="flex flex-row items-center gap-2">
diff --git a/src/components/admin/configuration/communicationType/CreateCommunicationTypeModal.vue b/src/components/admin/configuration/communicationType/CreateCommunicationTypeModal.vue
index d9f6785..284c703 100644
--- a/src/components/admin/configuration/communicationType/CreateCommunicationTypeModal.vue
+++ b/src/components/admin/configuration/communicationType/CreateCommunicationTypeModal.vue
@@ -14,7 +14,7 @@
           <ListboxLabel>Felder</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start"> {{ selectedFields.join(", ") }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -28,7 +28,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption
                   v-slot="{ active, selected }"
diff --git a/src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue b/src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue
index 184a5d5..da19c83 100644
--- a/src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue
+++ b/src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue
@@ -3,13 +3,13 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p>
       <div v-if="can('create', 'configuration', 'newsletter_config')" class="flex flex-row justify-end w-16">
-        <button v-if="status == null" type="submit" class="!p-0 !h-fit !w-fit" title="speichern">
+        <button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="speichern">
           <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />
         <SuccessCheckmark v-else-if="status?.status == 'success'" />
         <FailureXMark v-else-if="status?.status == 'failed'" />
-        <button type="button" class="!p-0 !h-fit !w-fit" title="zurücksetzen" @click="resetForm">
+        <button type="button" class="p-0! h-fit! w-fit!" title="zurücksetzen" @click="resetForm">
           <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
       </div>
diff --git a/src/components/admin/configuration/template/TemplateListItem.vue b/src/components/admin/configuration/template/TemplateListItem.vue
index a7c70e2..2ad4ab7 100644
--- a/src/components/admin/configuration/template/TemplateListItem.vue
+++ b/src/components/admin/configuration/template/TemplateListItem.vue
@@ -9,7 +9,7 @@
         >
           <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
         </RouterLink>
-        <button v-if="status == null" class="!p-0 !h-fit !w-fit" title="duplizieren" @click="cloneElement">
+        <button v-if="status == null" class="p-0! h-fit! w-fit!" title="duplizieren" @click="cloneElement">
           <DocumentDuplicateIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />
diff --git a/src/components/admin/configuration/templateUsage/TemplatePreviewModal.vue b/src/components/admin/configuration/templateUsage/TemplatePreviewModal.vue
index dbe69e2..6c4b2aa 100644
--- a/src/components/admin/configuration/templateUsage/TemplatePreviewModal.vue
+++ b/src/components/admin/configuration/templateUsage/TemplatePreviewModal.vue
@@ -5,7 +5,7 @@
       <iframe ref="viewer" class="w-full h-full" />
     </div>
 
-    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+    <button primary-outline class="w-fit! self-end" @click="closeModal">schließen</button>
   </div>
 </template>
 
diff --git a/src/components/admin/configuration/templateUsage/TemplateUsageListItem.vue b/src/components/admin/configuration/templateUsage/TemplateUsageListItem.vue
index 9b2b462..e3c4193 100644
--- a/src/components/admin/configuration/templateUsage/TemplateUsageListItem.vue
+++ b/src/components/admin/configuration/templateUsage/TemplateUsageListItem.vue
@@ -3,13 +3,13 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>Templates zu "{{ templateUsage.scope }}" zuweisen</p>
       <div class="flex flex-row justify-end w-16">
-        <button type="button" class="!p-0 !h-fit !w-fit" title="Vorschau erzeugen" @click="previewUsage">
+        <button type="button" class="p-0! h-fit! w-fit!" title="Vorschau erzeugen" @click="previewUsage">
           <EyeIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <button
           v-if="status == null && can('create', 'configuration', 'newsletter_config')"
           type="submit"
-          class="!p-0 !h-fit !w-fit"
+          class="p-0! h-fit! w-fit!"
           title="speichern"
         >
           <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
@@ -20,7 +20,7 @@
         <button
           type="button"
           v-if="can('create', 'configuration', 'newsletter_config')"
-          class="!p-0 !h-fit !w-fit"
+          class="p-0! h-fit! w-fit!"
           title="zurücksetzen"
           @click="resetForm"
         >
@@ -47,7 +47,7 @@
             type="number"
             :min="15"
             :value="templateUsage.headerHeight"
-            class="!w-24"
+            class="w-24!"
             placeholder="15"
           />
         </div>
@@ -77,7 +77,7 @@
             type="number"
             :min="15"
             :value="templateUsage.footerHeight"
-            class="!w-24"
+            class="w-24!"
             placeholder="15"
           />
         </div>
diff --git a/src/components/admin/management/backup/UploadBackupModal.vue b/src/components/admin/management/backup/UploadBackupModal.vue
index fad36f8..8ed4ca6 100644
--- a/src/components/admin/management/backup/UploadBackupModal.vue
+++ b/src/components/admin/management/backup/UploadBackupModal.vue
@@ -14,7 +14,7 @@
     <p class="hidden md:block text-center">oder</p>
     <div class="flex flex-row gap-2 items-center">
       <input
-        class="!hidden"
+        class="hidden!"
         type="file"
         ref="fileSelect"
         accept="application/JSON"
diff --git a/src/components/admin/management/user/InviteUserModal.vue b/src/components/admin/management/user/InviteUserModal.vue
index b450b7d..07c9694 100644
--- a/src/components/admin/management/user/InviteUserModal.vue
+++ b/src/components/admin/management/user/InviteUserModal.vue
@@ -8,16 +8,16 @@
     <form class="flex flex-col gap-4 py-2" @submit.prevent="invite">
       <div class="-space-y-px">
         <div>
-          <input id="username" name="username" type="text" required placeholder="Benutzer" class="!rounded-b-none" />
+          <input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
         </div>
         <div>
-          <input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="!rounded-none" />
+          <input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="rounded-none!" />
         </div>
         <div>
-          <input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="!rounded-none" />
+          <input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="rounded-none!" />
         </div>
         <div>
-          <input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="!rounded-t-none" />
+          <input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="rounded-t-none!" />
         </div>
       </div>
       <div class="flex flex-row gap-2">
diff --git a/src/components/queryBuilder/BuilderHost.vue b/src/components/queryBuilder/BuilderHost.vue
index cbe420e..bbb5b07 100644
--- a/src/components/queryBuilder/BuilderHost.vue
+++ b/src/components/queryBuilder/BuilderHost.vue
@@ -30,7 +30,7 @@
         v-if="allowPredefinedSelect && can('read', 'configuration', 'query_store')"
         class="flex flex-row gap-2 max-lg:w-full max-lg:order-10"
       >
-        <select v-model="activeQueryId" class="max-h-[34px] !py-0">
+        <select v-model="activeQueryId" class="max-h-[34px] py-0!">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
           <option v-for="query in queries" :key="query.id" :value="query.id">
             {{ query.title }}
diff --git a/src/components/queryBuilder/ColumnSelect.vue b/src/components/queryBuilder/ColumnSelect.vue
index e282235..7c94a6f 100644
--- a/src/components/queryBuilder/ColumnSelect.vue
+++ b/src/components/queryBuilder/ColumnSelect.vue
@@ -3,7 +3,7 @@
     <p class="w-14 min-w-14 pt-2">SELECT</p>
     <div class="flex flex-row flex-wrap gap-2 items-center">
       <p
-        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        class="rounded-md shadow-xs relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
         :class="value == '*' ? 'border-gray-600 bg-gray-200' : ''"
         @click="value = '*'"
       >
@@ -12,7 +12,7 @@
       <p
         v-for="col in columns"
         :key="col.column"
-        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        class="rounded-md shadow-xs relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
         :class="value.includes(col.column) ? 'border-gray-600 bg-gray-200' : ''"
         @click="value = [col.column]"
       >
diff --git a/src/components/queryBuilder/Condition.vue b/src/components/queryBuilder/Condition.vue
index b521fda..6a262d5 100644
--- a/src/components/queryBuilder/Condition.vue
+++ b/src/components/queryBuilder/Condition.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 items-center w-full">
-    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+    <select v-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
       <option value="" disabled>Verknüpfung auswählen</option>
       <option v-for="operation in ['AND', 'OR']" :value="operation">
         {{ operation }}
@@ -12,7 +12,7 @@
         {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
       </option>
     </select>
-    <select v-model="operation" class="!w-fit !h-fit">
+    <select v-model="operation" class="w-fit! h-fit!">
       <option value="" disabled>Vergleich auswählen</option>
       <option v-for="op in whereOperationArray" :value="op">
         {{ op }}
diff --git a/src/components/queryBuilder/NestedCondition.vue b/src/components/queryBuilder/NestedCondition.vue
index d6ecbac..2a7e073 100644
--- a/src/components/queryBuilder/NestedCondition.vue
+++ b/src/components/queryBuilder/NestedCondition.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
-    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+    <select v-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
       <option value="" disabled>Verknüpfung auswählen</option>
       <option v-for="operation in ['AND', 'OR']" :value="operation">
         {{ operation }}
diff --git a/src/components/queryBuilder/StructureModal.vue b/src/components/queryBuilder/StructureModal.vue
index 2f63cd3..cfd21ca 100644
--- a/src/components/queryBuilder/StructureModal.vue
+++ b/src/components/queryBuilder/StructureModal.vue
@@ -11,7 +11,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <a href="/administration-db.png" button primary-outline download="Datenbank-Schema" class="!whitespace-nowrap"
+        <a href="/administration-db.png" button primary-outline download="Datenbank-Schema" class="whitespace-nowrap!"
           >Bild herunterladen</a
         >
         <button primary-outline @click="closeModal">schließen</button>
diff --git a/src/main.css b/src/main.css
index f23dcde..d972fa1 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,6 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --color-error: var(--error);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-success: var(--success);
+}
 
 @layer base {
   :root {
@@ -59,7 +67,7 @@ body {
 /*:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"])*/
 button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
 a[button] {
-  @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
+  @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-hidden focus:ring-0;
 }
 
 button[primary]:not([primary="false"]),
@@ -81,7 +89,7 @@ a[button].disabled {
 input:not([type="checkbox"]),
 textarea,
 select {
-  @apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
+  @apply rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none;
 }
 
 input[readonly],
@@ -125,10 +133,10 @@ summary::-webkit-details-marker {
 }
 
 .fc-button-primary {
-  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
+  @apply bg-primary! border-primary! outline-hidden! ring-0! hover:bg-red-700! hover:border-red-700! h-10 text-center;
 }
 .fc-button-active {
-  @apply !bg-red-500 !border-red-500;
+  @apply bg-red-500! border-red-500!;
 }
 .fc-toolbar {
   @apply flex-wrap;
@@ -137,7 +145,7 @@ summary::-webkit-details-marker {
 /* For screens between 850px and 768px */
 @media (max-width: 850px) and (min-width: 768px) {
   .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
-    @apply !order-1;
+    @apply order-1!;
   }
   /* Your styles for this range */
 }
@@ -146,6 +154,6 @@ summary::-webkit-details-marker {
 @media (max-width: 525px) and (min-width: 0px) {
   /* Your styles for this range */
   .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
-    @apply !order-1;
+    @apply order-1!;
   }
 }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index a11543e..5a8b9f4 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -11,7 +11,7 @@
       <form class="flex flex-col gap-2" @submit.prevent="login">
         <div class="-space-y-px">
           <div>
-            <input id="username" name="username" type="text" required placeholder="Benutzer" class="!rounded-b-none" />
+            <input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
           </div>
           <div>
             <input
@@ -20,7 +20,7 @@
               type="text"
               required
               placeholder="TOTP"
-              class="!rounded-t-none"
+              class="rounded-t-none!"
               autocomplete="off"
             />
           </div>
diff --git a/src/views/NoPermission.vue b/src/views/NoPermission.vue
index 9ca26b2..d953327 100644
--- a/src/views/NoPermission.vue
+++ b/src/views/NoPermission.vue
@@ -8,7 +8,7 @@
       Um Zugriff auf das Admin-Portal zu erhalten, wenden Sie sich an einen Administrator.
     </p>
     <br />
-    <button primary class="!w-fit" @click="refetch">Zum Admin-Portal</button>
+    <button primary class="w-fit!" @click="refetch">Zum Admin-Portal</button>
   </div>
 </template>
 
diff --git a/src/views/account/Administration.vue b/src/views/account/Administration.vue
index 6ae2830..d2d0a3b 100644
--- a/src/views/account/Administration.vue
+++ b/src/views/account/Administration.vue
@@ -14,7 +14,7 @@
             <ComboboxLabel>Nutzer suchen</ComboboxLabel>
             <div class="relative mt-1">
               <ComboboxInput
-                class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
                 :displayValue="
                   (person) => (person as UserViewModel)?.firstname + ' ' + (person as UserViewModel)?.lastname
                 "
@@ -30,7 +30,7 @@
                 @after-leave="query = ''"
               >
                 <ComboboxOptions
-                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
                 >
                   <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
                     <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
@@ -70,8 +70,8 @@
           </Combobox>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" @click="selected = undefined">abbrechen</button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || selected == undefined">
+          <button primary-outline type="reset" class="w-fit!" @click="selected = undefined">abbrechen</button>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || selected == undefined">
             übertragen
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/account/Me.vue b/src/views/account/Me.vue
index af500de..4fb7bd1 100644
--- a/src/views/account/Me.vue
+++ b/src/views/account/Me.vue
@@ -30,10 +30,10 @@
           <input type="email" id="mail" required v-model="user.mail" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/club/listprint/ListPrint.vue b/src/views/admin/club/listprint/ListPrint.vue
index b193917..51c0872 100644
--- a/src/views/admin/club/listprint/ListPrint.vue
+++ b/src/views/admin/club/listprint/ListPrint.vue
@@ -37,7 +37,7 @@
             </div>
             <div class="flex flex-row gap-2 items-center">
               <p class="whitespace-nowrap">Höhe [mm]:</p>
-              <input id="headerHeight" type="number" :min="15" class="!w-24" placeholder="15" />
+              <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
             </div>
           </div>
           <div class="flex flex-row gap-2 items-center">
@@ -62,12 +62,12 @@
             </div>
             <div class="flex flex-row gap-2 items-center">
               <p class="whitespace-nowrap">Höhe [mm]:</p>
-              <input id="footerHeight" type="number" :min="15" class="!w-24" placeholder="15" />
+              <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
             </div>
           </div>
           <div class="flex flex-row gap-2">
-            <button type="submit" primary class="!w-fit">Liste drucken</button>
-            <button type="reset" primary-outline class="!w-fit">zurücksetzen</button>
+            <button type="submit" primary class="w-fit!">Liste drucken</button>
+            <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
           </div>
         </form>
         <div class="w-full grow min-h-[50%] flex flex-col gap-2">
@@ -77,7 +77,7 @@
           </div>
 
           <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
-            <a ref="download" button primary class="!w-fit">download</a>
+            <a ref="download" button primary class="w-fit!">download</a>
           </div>
         </div>
       </div>
diff --git a/src/views/admin/club/members/Member.vue b/src/views/admin/club/members/Member.vue
index 59b8b9f..686ed81 100644
--- a/src/views/admin/club/members/Member.vue
+++ b/src/views/admin/club/members/Member.vue
@@ -21,7 +21,7 @@
         </Pagination>
 
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
             Mitglied erstellen
           </button>
         </div>
diff --git a/src/views/admin/club/members/MemberAwards.vue b/src/views/admin/club/members/MemberAwards.vue
index f535d27..ca800cf 100644
--- a/src/views/admin/club/members/MemberAwards.vue
+++ b/src/views/admin/club/members/MemberAwards.vue
@@ -7,7 +7,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Auszeichnung hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/members/MemberCommunication.vue b/src/views/admin/club/members/MemberCommunication.vue
index c948c22..4949201 100644
--- a/src/views/admin/club/members/MemberCommunication.vue
+++ b/src/views/admin/club/members/MemberCommunication.vue
@@ -11,7 +11,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Kommunikation hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/members/MemberEdit.vue b/src/views/admin/club/members/MemberEdit.vue
index 77e6a45..42eb162 100644
--- a/src/views/admin/club/members/MemberEdit.vue
+++ b/src/views/admin/club/members/MemberEdit.vue
@@ -13,7 +13,7 @@
           <ListboxLabel>Anrede</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start"> {{ member.salutation.salutation }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -27,7 +27,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption
                   v-slot="{ active, selected }"
@@ -76,10 +76,10 @@
         <input type="text" id="internalId" v-model="member.internalId" />
       </div>
       <div class="flex flex-row justify-end gap-2">
-        <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
           verwerfen
         </button>
-        <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
           speichern
         </button>
         <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/club/members/MemberExecutivePositions.vue b/src/views/admin/club/members/MemberExecutivePositions.vue
index 3ebfe98..f038836 100644
--- a/src/views/admin/club/members/MemberExecutivePositions.vue
+++ b/src/views/admin/club/members/MemberExecutivePositions.vue
@@ -11,7 +11,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Vereinsamt hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/members/MemberQualifications.vue b/src/views/admin/club/members/MemberQualifications.vue
index 76b15cd..116aaed 100644
--- a/src/views/admin/club/members/MemberQualifications.vue
+++ b/src/views/admin/club/members/MemberQualifications.vue
@@ -11,7 +11,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Qualifikation hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/members/MemberRouting.vue b/src/views/admin/club/members/MemberRouting.vue
index ff5a2dc..eea8b24 100644
--- a/src/views/admin/club/members/MemberRouting.vue
+++ b/src/views/admin/club/members/MemberRouting.vue
@@ -32,8 +32,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}
diff --git a/src/views/admin/club/members/Membership.vue b/src/views/admin/club/members/Membership.vue
index 1b5c9c5..a68292b 100644
--- a/src/views/admin/club/members/Membership.vue
+++ b/src/views/admin/club/members/Membership.vue
@@ -7,7 +7,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Mitgliedschaft hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/newsletter/Newsletter.vue b/src/views/admin/club/newsletter/Newsletter.vue
index a6b3bed..37e24ab 100644
--- a/src/views/admin/club/newsletter/Newsletter.vue
+++ b/src/views/admin/club/newsletter/Newsletter.vue
@@ -20,7 +20,7 @@
         </Pagination>
 
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'club', 'newsletter')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'club', 'newsletter')" primary class="w-fit!" @click="openCreateModal">
             Newsletter erstellen
           </button>
         </div>
diff --git a/src/views/admin/club/newsletter/NewsletterDates.vue b/src/views/admin/club/newsletter/NewsletterDates.vue
index ddf188a..2fdaa1e 100644
--- a/src/views/admin/club/newsletter/NewsletterDates.vue
+++ b/src/views/admin/club/newsletter/NewsletterDates.vue
@@ -94,7 +94,7 @@
           {{ cal.title }}
         </option>
       </select>
-      <button type="submit" primary class="!w-fit">hinzufügen</button>
+      <button type="submit" primary class="w-fit!">hinzufügen</button>
     </form>
   </div>
 </template>
diff --git a/src/views/admin/club/newsletter/NewsletterPrintout.vue b/src/views/admin/club/newsletter/NewsletterPrintout.vue
index 3fd49ef..db9dcd2 100644
--- a/src/views/admin/club/newsletter/NewsletterPrintout.vue
+++ b/src/views/admin/club/newsletter/NewsletterPrintout.vue
@@ -25,7 +25,7 @@
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary
-        class="!w-fit whitespace-nowrap flex flex-row gap-2"
+        class="w-fit! whitespace-nowrap flex flex-row gap-2"
         :disabled="printing != undefined"
         @click="openPdfCommit"
       >
@@ -37,7 +37,7 @@
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary
-        class="!w-fit whitespace-nowrap flex flex-row gap-2"
+        class="w-fit! whitespace-nowrap flex flex-row gap-2"
         :disabled="sending != undefined"
         @click="openMailCommit"
       >
@@ -46,13 +46,13 @@
         <SuccessCheckmark v-else-if="sending == 'success'" />
         <FailureXMark v-else-if="sending == 'failed'" />
       </button>
-      <button v-if="can('create', 'club', 'newsletter')" primary-outline class="!w-fit" @click="openPdfShow()">
+      <button v-if="can('create', 'club', 'newsletter')" primary-outline class="w-fit!" @click="openPdfShow()">
         Newsletter Vorschau
       </button>
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary-outline
-        class="!w-fit whitespace-nowrap flex flex-row gap-2"
+        class="w-fit! whitespace-nowrap flex flex-row gap-2"
         :disabled="sendingPreview != undefined"
         @click="createNewsletterMailPreview"
       >
@@ -61,10 +61,10 @@
         <SuccessCheckmark v-else-if="sendingPreview == 'success'" />
         <FailureXMark v-else-if="sendingPreview == 'failed'" />
       </button>
-      <button v-if="pdfSourceMessages.length != 0" primary-outline class="!w-fit" @click="openPdfLogs">
+      <button v-if="pdfSourceMessages.length != 0" primary-outline class="w-fit!" @click="openPdfLogs">
         Druck Logs
       </button>
-      <button v-if="mailSourceMessages.length != 0" primary-outline class="!w-fit" @click="openMailLogs">
+      <button v-if="mailSourceMessages.length != 0" primary-outline class="w-fit!" @click="openMailLogs">
         Versand Logs
       </button>
     </div>
diff --git a/src/views/admin/club/newsletter/NewsletterRouting.vue b/src/views/admin/club/newsletter/NewsletterRouting.vue
index 16458a1..c8805e4 100644
--- a/src/views/admin/club/newsletter/NewsletterRouting.vue
+++ b/src/views/admin/club/newsletter/NewsletterRouting.vue
@@ -29,8 +29,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}
diff --git a/src/views/admin/club/protocol/Protocol.vue b/src/views/admin/club/protocol/Protocol.vue
index b19c874..162eac4 100644
--- a/src/views/admin/club/protocol/Protocol.vue
+++ b/src/views/admin/club/protocol/Protocol.vue
@@ -20,7 +20,7 @@
         </Pagination>
 
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="openCreateModal">
             Protokoll erstellen
           </button>
         </div>
diff --git a/src/views/admin/club/protocol/ProtocolAgenda.vue b/src/views/admin/club/protocol/ProtocolAgenda.vue
index 25504d6..c3ee9da 100644
--- a/src/views/admin/club/protocol/ProtocolAgenda.vue
+++ b/src/views/admin/club/protocol/ProtocolAgenda.vue
@@ -58,7 +58,7 @@
       </details>
     </div>
 
-    <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolAgenda">
+    <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="createProtocolAgenda">
       Eintrag hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/protocol/ProtocolDecisions.vue b/src/views/admin/club/protocol/ProtocolDecisions.vue
index d3559bf..be8bc61 100644
--- a/src/views/admin/club/protocol/ProtocolDecisions.vue
+++ b/src/views/admin/club/protocol/ProtocolDecisions.vue
@@ -58,7 +58,7 @@
       </details>
     </div>
 
-    <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolDecision">
+    <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="createProtocolDecision">
       Eintrag hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/club/protocol/ProtocolPrintout.vue b/src/views/admin/club/protocol/ProtocolPrintout.vue
index 132ebb2..99d55c8 100644
--- a/src/views/admin/club/protocol/ProtocolPrintout.vue
+++ b/src/views/admin/club/protocol/ProtocolPrintout.vue
@@ -33,7 +33,7 @@
       <button
         v-if="can('create', 'club', 'protocol')"
         primary
-        class="!w-fit"
+        class="w-fit!"
         :disabled="printing != undefined"
         @click="createProtocolPrintout"
       >
diff --git a/src/views/admin/club/protocol/ProtocolRouting.vue b/src/views/admin/club/protocol/ProtocolRouting.vue
index 1fc997f..cf89a8c 100644
--- a/src/views/admin/club/protocol/ProtocolRouting.vue
+++ b/src/views/admin/club/protocol/ProtocolRouting.vue
@@ -29,8 +29,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}
diff --git a/src/views/admin/club/protocol/ProtocolVoting.vue b/src/views/admin/club/protocol/ProtocolVoting.vue
index 377f825..3d8698a 100644
--- a/src/views/admin/club/protocol/ProtocolVoting.vue
+++ b/src/views/admin/club/protocol/ProtocolVoting.vue
@@ -75,7 +75,7 @@
       </details>
     </div>
 
-    <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolVoting">
+    <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="createProtocolVoting">
       Abstimmung hinzufügen
     </button>
   </div>
diff --git a/src/views/admin/configuration/award/Award.vue b/src/views/admin/configuration/award/Award.vue
index cc96882..5b51a26 100644
--- a/src/views/admin/configuration/award/Award.vue
+++ b/src/views/admin/configuration/award/Award.vue
@@ -11,7 +11,7 @@
           <AwardListItem v-for="award in awards" :key="award.id" :award="award" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'configuration', 'award')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'configuration', 'award')" primary class="w-fit!" @click="openCreateModal">
             Auszeichnung erstellen
           </button>
         </div>
diff --git a/src/views/admin/configuration/award/AwardEdit.vue b/src/views/admin/configuration/award/AwardEdit.vue
index b85350d..4e6a4a1 100644
--- a/src/views/admin/configuration/award/AwardEdit.vue
+++ b/src/views/admin/configuration/award/AwardEdit.vue
@@ -21,10 +21,10 @@
           <input type="text" id="award" required v-model="award.award" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/calendarType/CalendarType.vue b/src/views/admin/configuration/calendarType/CalendarType.vue
index 1296798..5ec6a1b 100644
--- a/src/views/admin/configuration/calendarType/CalendarType.vue
+++ b/src/views/admin/configuration/calendarType/CalendarType.vue
@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'calendar_type')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Termintyp erstellen
diff --git a/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue b/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue
index d9e407f..f1aebb7 100644
--- a/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue
+++ b/src/views/admin/configuration/calendarType/CalendarTypeEdit.vue
@@ -21,7 +21,7 @@
           <input type="text" id="type" required v-model="calendarType.type" />
         </div>
         <div class="flex flex-row items-center gap-2">
-          <input type="color" id="color" required v-model="calendarType.color" class="!px-1 !py-0 !w-10" />
+          <input type="color" id="color" required v-model="calendarType.color" class="px-1! py-0! w-10!" />
           <label for="color">Farbe</label>
         </div>
         <div class="flex flex-row items-center gap-2">
@@ -34,10 +34,10 @@
         </div>
 
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/communicationType/CommunicationType.vue b/src/views/admin/configuration/communicationType/CommunicationType.vue
index e792b61..2d0fb4c 100644
--- a/src/views/admin/configuration/communicationType/CommunicationType.vue
+++ b/src/views/admin/configuration/communicationType/CommunicationType.vue
@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'communication_type')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Kommunikationsart erstellen
diff --git a/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue b/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue
index 08804ff..ed42874 100644
--- a/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue
+++ b/src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue
@@ -25,7 +25,7 @@
             <ListboxLabel>Felder</ListboxLabel>
             <div class="relative mt-1">
               <ListboxButton
-                class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
               >
                 <span class="block truncate w-full text-start"> {{ communicationType.fields.join(", ") }}</span>
                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -39,7 +39,7 @@
                 leave-to-class="opacity-0"
               >
                 <ListboxOptions
-                  class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                  class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
                 >
                   <ListboxOption
                     v-slot="{ active, selected }"
@@ -66,10 +66,10 @@
           </Listbox>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/executivePosition/ExecutivePosition.vue b/src/views/admin/configuration/executivePosition/ExecutivePosition.vue
index e2bd01d..4a44749 100644
--- a/src/views/admin/configuration/executivePosition/ExecutivePosition.vue
+++ b/src/views/admin/configuration/executivePosition/ExecutivePosition.vue
@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'executive_position')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Vereinsämt erstellen
diff --git a/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue b/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue
index 50175e3..6fa253b 100644
--- a/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue
+++ b/src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue
@@ -21,10 +21,10 @@
           <input type="text" id="executivePosition" required v-model="executivePosition.position" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/membershipStatus/MembershipStatus.vue b/src/views/admin/configuration/membershipStatus/MembershipStatus.vue
index c7294fa..014bae0 100644
--- a/src/views/admin/configuration/membershipStatus/MembershipStatus.vue
+++ b/src/views/admin/configuration/membershipStatus/MembershipStatus.vue
@@ -14,7 +14,7 @@
           <button
             v-if="can('create', 'configuration', 'membership_status')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Mitgliedsstatus erstellen
diff --git a/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue b/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue
index 18e8027..e91f115 100644
--- a/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue
+++ b/src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue
@@ -21,10 +21,10 @@
           <input type="text" id="membershipStatusStatus" required v-model="membershipStatus.status" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/qualification/Qualification.vue b/src/views/admin/configuration/qualification/Qualification.vue
index e439b78..cca2026 100644
--- a/src/views/admin/configuration/qualification/Qualification.vue
+++ b/src/views/admin/configuration/qualification/Qualification.vue
@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'qualification')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Qualifikation erstellen
diff --git a/src/views/admin/configuration/qualification/QualificationEdit.vue b/src/views/admin/configuration/qualification/QualificationEdit.vue
index 71a5d30..9fcdb93 100644
--- a/src/views/admin/configuration/qualification/QualificationEdit.vue
+++ b/src/views/admin/configuration/qualification/QualificationEdit.vue
@@ -25,10 +25,10 @@
           <input type="text" id="description" v-model="qualification.description" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/queryStore/QueryStore.vue b/src/views/admin/configuration/queryStore/QueryStore.vue
index 3673546..a9b47a8 100644
--- a/src/views/admin/configuration/queryStore/QueryStore.vue
+++ b/src/views/admin/configuration/queryStore/QueryStore.vue
@@ -16,7 +16,7 @@
             :to="{ name: 'admin-club-query_builder' }"
             button
             primary
-            class="!w-fit"
+            class="w-fit!"
           >
             Abfrage erstellen
           </RouterLink>
diff --git a/src/views/admin/configuration/salutation/Salutation.vue b/src/views/admin/configuration/salutation/Salutation.vue
index 7072c5e..a1ad0aa 100644
--- a/src/views/admin/configuration/salutation/Salutation.vue
+++ b/src/views/admin/configuration/salutation/Salutation.vue
@@ -11,7 +11,7 @@
           <SalutationListItem v-for="salutation in salutations" :key="salutation.id" :salutation="salutation" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'configuration', 'salutation')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'configuration', 'salutation')" primary class="w-fit!" @click="openCreateModal">
             Anrede erstellen
           </button>
         </div>
diff --git a/src/views/admin/configuration/salutation/SalutationEdit.vue b/src/views/admin/configuration/salutation/SalutationEdit.vue
index 51d49f5..e1fd5f1 100644
--- a/src/views/admin/configuration/salutation/SalutationEdit.vue
+++ b/src/views/admin/configuration/salutation/SalutationEdit.vue
@@ -21,10 +21,10 @@
           <input type="text" id="salutation" required v-model="salutation.salutation" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/configuration/template/Template.vue b/src/views/admin/configuration/template/Template.vue
index 742517c..478467a 100644
--- a/src/views/admin/configuration/template/Template.vue
+++ b/src/views/admin/configuration/template/Template.vue
@@ -14,7 +14,7 @@
           <TemplateListItem v-for="template in templates" :key="template.id" :template="template" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'configuration', 'template')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'configuration', 'template')" primary class="w-fit!" @click="openCreateModal">
             Template erstellen
           </button>
         </div>
diff --git a/src/views/admin/configuration/template/TemplateEdit.vue b/src/views/admin/configuration/template/TemplateEdit.vue
index e5376f6..3525a87 100644
--- a/src/views/admin/configuration/template/TemplateEdit.vue
+++ b/src/views/admin/configuration/template/TemplateEdit.vue
@@ -32,10 +32,10 @@
         </div>
         <div ref="grapesEditor" id="grapesEditor"></div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="status == 'loading'" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="status == 'loading'" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="status?.status == 'success'" />
           <FailureXMark v-else-if="status?.status == 'failed'" />
diff --git a/src/views/admin/management/backup/BackupRouting.vue b/src/views/admin/management/backup/BackupRouting.vue
index 53c7580..ba9d64d 100644
--- a/src/views/admin/management/backup/BackupRouting.vue
+++ b/src/views/admin/management/backup/BackupRouting.vue
@@ -18,8 +18,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}
diff --git a/src/views/admin/management/backup/GeneratedBackup.vue b/src/views/admin/management/backup/GeneratedBackup.vue
index b339e98..1e7920a 100644
--- a/src/views/admin/management/backup/GeneratedBackup.vue
+++ b/src/views/admin/management/backup/GeneratedBackup.vue
@@ -4,7 +4,7 @@
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'management', 'backup')" primary class="!w-fit" @click="openCreateModal">
+      <button v-if="can('create', 'management', 'backup')" primary class="w-fit!" @click="openCreateModal">
         Backup erstellen
       </button>
     </div>
diff --git a/src/views/admin/management/backup/UploadedBackup.vue b/src/views/admin/management/backup/UploadedBackup.vue
index ff650fc..c977c81 100644
--- a/src/views/admin/management/backup/UploadedBackup.vue
+++ b/src/views/admin/management/backup/UploadedBackup.vue
@@ -4,7 +4,7 @@
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'management', 'backup')" primary class="!w-fit" @click="openUploadModal">
+      <button v-if="can('create', 'management', 'backup')" primary class="w-fit!" @click="openUploadModal">
         Backup hochladen
       </button>
     </div>
diff --git a/src/views/admin/management/role/Role.vue b/src/views/admin/management/role/Role.vue
index 2567b24..3aa8205 100644
--- a/src/views/admin/management/role/Role.vue
+++ b/src/views/admin/management/role/Role.vue
@@ -11,7 +11,7 @@
           <RoleListItem v-for="role in roles" :key="role.id" :role="role" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'management', 'role')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'management', 'role')" primary class="w-fit!" @click="openCreateModal">
             Rolle erstellen
           </button>
         </div>
diff --git a/src/views/admin/management/role/RoleEdit.vue b/src/views/admin/management/role/RoleEdit.vue
index 714bdfc..139e1af 100644
--- a/src/views/admin/management/role/RoleEdit.vue
+++ b/src/views/admin/management/role/RoleEdit.vue
@@ -21,10 +21,10 @@
           <input type="text" id="role" required v-model="role.role" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/management/user/User.vue b/src/views/admin/management/user/User.vue
index 96315c7..0749841 100644
--- a/src/views/admin/management/user/User.vue
+++ b/src/views/admin/management/user/User.vue
@@ -11,10 +11,10 @@
           <UserListItem v-for="user in users" :key="user.id" :user="user" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'management', 'user')" primary class="!w-fit" @click="inviteUser">
+          <button v-if="can('create', 'management', 'user')" primary class="w-fit!" @click="inviteUser">
             Nutzer einladen
           </button>
-          <RouterLink button primary-outline :to="{ name: 'admin-management-user-invites' }" class="!w-fit">
+          <RouterLink button primary-outline :to="{ name: 'admin-management-user-invites' }" class="w-fit!">
             offene Einladungen
           </RouterLink>
         </div>
diff --git a/src/views/admin/management/user/UserEdit.vue b/src/views/admin/management/user/UserEdit.vue
index 53554f7..7a8299c 100644
--- a/src/views/admin/management/user/UserEdit.vue
+++ b/src/views/admin/management/user/UserEdit.vue
@@ -33,10 +33,10 @@
           <input type="email" id="mail" required v-model="user.mail" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/management/user/UserEditRoles.vue b/src/views/admin/management/user/UserEditRoles.vue
index 720cdc4..87ca35c 100644
--- a/src/views/admin/management/user/UserEditRoles.vue
+++ b/src/views/admin/management/user/UserEditRoles.vue
@@ -39,8 +39,8 @@
           </div>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
-          <button primary class="!w-fit" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
+          <button primary-outline class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
+          <button primary class="w-fit!" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/admin/management/webapi/Webapi.vue b/src/views/admin/management/webapi/Webapi.vue
index 77c80e4..111c0f9 100644
--- a/src/views/admin/management/webapi/Webapi.vue
+++ b/src/views/admin/management/webapi/Webapi.vue
@@ -11,7 +11,7 @@
           <WebapiListItem v-for="webapi in webapis" :key="webapi.id" :webapi="webapi" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'management', 'webapi')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'management', 'webapi')" primary class="w-fit!" @click="openCreateModal">
             Webapi-Token erstellen
           </button>
         </div>
diff --git a/src/views/admin/management/webapi/WebapiEdit.vue b/src/views/admin/management/webapi/WebapiEdit.vue
index 84f6743..65ea18f 100644
--- a/src/views/admin/management/webapi/WebapiEdit.vue
+++ b/src/views/admin/management/webapi/WebapiEdit.vue
@@ -25,10 +25,10 @@
           <input type="date" id="expiry" step="1" v-model="webapi.expiry" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
diff --git a/src/views/notFound.vue b/src/views/notFound.vue
index 1a4e66c..6a0efba 100644
--- a/src/views/notFound.vue
+++ b/src/views/notFound.vue
@@ -6,7 +6,7 @@
           <h1 class="font-thin text-center text-6xl text-gray-800">GOT LOST ?</h1>
           <a
             href="/"
-            class="px-3 py-2 w-auto font-light transition ease-in duration-200 uppercase hover:bg-yellow-600 hover:text-white border-b text-2xl border-yellow-600 focus:outline-none"
+            class="px-3 py-2 w-auto font-light transition ease-in duration-200 uppercase hover:bg-yellow-600 hover:text-white border-b text-2xl border-yellow-600 focus:outline-hidden"
           >
             Back Home?
           </a>
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index e265862..f8c30bd 100644
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -9,16 +9,16 @@
       <form class="flex flex-col gap-2" @submit.prevent="setup">
         <div class="-space-y-px">
           <div>
-            <input id="username" name="username" type="text" required placeholder="Benutzer" class="!rounded-b-none" />
+            <input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
           </div>
           <div>
-            <input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="!rounded-none" />
+            <input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="rounded-none!" />
           </div>
           <div>
-            <input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="!rounded-none" />
+            <input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="rounded-none!" />
           </div>
           <div>
-            <input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="!rounded-t-none" />
+            <input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="rounded-t-none!" />
           </div>
         </div>
 
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 59560d6..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        primary: "var(--primary)",
-        secondary: "var(--secondary)",
-        accent: "var(--accent)",
-        error: "var(--error)",
-        warning: "var(--warning)",
-        info: "var(--info)",
-        success: "var(--success)",
-      },
-    },
-  },
-  plugins: [],
-};