postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

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">

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

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>

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">

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-outline class="w-fit!" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
-      <button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
+      <button primary class="w-fit!" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
         speichern
       </button>
       <Spinner v-if="status == 'loading'" class="my-auto" />

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']">

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']">

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

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 }"

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']">

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']">

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']">

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']">

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']">

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>
+      <a ref="download" button primary class="w-fit!">download</a>
-      <button primary-outline class="!w-fit" @click="closeModal">schließen</button>
+      <button primary-outline class="w-fit!" @click="closeModal">schließen</button>
     </div>
   </div>
 </template>

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']">

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']">

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']">

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']">

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>
 

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>
 

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">

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 }"

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>

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

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>
 

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>

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"

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">

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 }}

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]"
       >

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 }}

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 }}

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>

src/main.css

@@ -1,6 +1,14 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@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!;
   }
 }

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>

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>
 

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-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 type="submit" class="w-fit!" :disabled="status == 'loading' || selected == undefined">
             übertragen
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

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

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="submit" primary class="w-fit!">Liste drucken</button>
-            <button type="reset" primary-outline class="!w-fit">zurücksetzen</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>

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>

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>

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>

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

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>

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>

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',
+                  '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 border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

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>

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>

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>

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>

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',
+                  '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 border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

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>

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>

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>

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"
       >

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',
+                  '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 border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

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>

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>

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

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

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

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

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

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

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

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

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

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

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

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>

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>

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

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>

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'" />

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',
+                  '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 border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

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>

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>

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>

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

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>

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

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-outline class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
-          <button primary class="!w-fit" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
+          <button primary class="w-fit!" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

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>

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

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>

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>
 

tailwind.config.js

@@ -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: [],
-};