Upgrade to tailwindcss 2.x

assets/src/css/app.css

@@ -11,7 +11,7 @@
 [v-cloak] { display:none; }
 
 .loader {
-  @apply .m-0;
+  @apply m-0;
   right: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

assets/src/css/components/buttons.css

@@ -1,83 +1,83 @@
 .btn {
-    @apply .flex-shrink-0 .text-sm .border-4 .text-gray-900 .py-1 .px-2 .rounded .no-underline .shadow-md;
+    @apply flex-shrink-0 text-sm border-4 text-gray-900 py-1 px-2 rounded no-underline shadow-md;
 }
 
 .btn.btn-sm {
-    @apply .border;
+    @apply border;
 }
 
 .btn.btn-xs {
-    @apply .text-xs .border;
+    @apply text-xs border;
 }
 
 .btn.btn-gray-lightest {
-    @apply  .bg-gray-100 .border-gray-100;
+    @apply  bg-gray-100 border-gray-100;
 }
 
 .btn.btn-gray-lightest:hover, .btn.btn-gray-lightest:focus {
-    @apply .bg-gray-200 .border-gray-200;
+    @apply bg-gray-200 border-gray-200;
 }
 
 .btn.btn-black {
-    @apply  .bg-gray-900 .border-gray-900 .text-white;
+    @apply  bg-gray-900 border-gray-900 text-white;
 }
 
 .btn.btn.btn-black:hover, .btn.btn.btn-black:focus {
-    @apply .bg-gray-800 .border-gray-800;
+    @apply bg-gray-800 border-gray-800;
 }
 
 .btn.btn-blue {
-    @apply  .bg-blue-500 .border-blue-500 .text-white;
+    @apply  bg-blue-500 border-blue-500 text-white;
 }
 
 .btn.btn.btn-blue:hover, .btn.btn.btn-blue:focus {
-    @apply .bg-blue-600 .border-blue-600;
+    @apply bg-blue-600 border-blue-600;
 }
 
 .btn.btn-red {
-    @apply  .bg-red-500 .border-red-500 .text-white;
+    @apply  bg-red-500 border-red-500 text-white;
 }
 
 .btn.btn.btn-red:hover, .btn.btn.btn-red:focus {
-    @apply .bg-red-500 .border-red-500;
+    @apply bg-red-500 border-red-500;
 }
 
 .btn.btn-green {
-    @apply  .bg-green-500 .border-green-500 .text-white;
+    @apply  bg-green-500 border-green-500 text-white;
 }
 
 .btn.btn.btn-green:hover, .btn.btn.btn-green:focus {
-    @apply .bg-green-600 .border-green-600;
+    @apply bg-green-600 border-green-600;
 }
 
 .btn.btn-orange {
-    @apply  .bg-orange-500 .border-orange-500 .text-white;
+    @apply  bg-yellow-500 border-yellow-500 text-white;
 }
 
 .btn.btn.btn-orange:hover, .btn.btn.btn-orange:focus {
-    @apply .bg-orange-600 .border-orange-600;
+    @apply bg-yellow-600 border-yellow-600;
 }
 
 .btn.btn-gray-light {
-    @apply  .bg-gray-400 .border-gray-400 .text-gray-800;
+    @apply  bg-gray-400 border-gray-400 text-gray-800;
 }
 
 .btn.btn-gray-light:hover, .btn.btn-gray-light:focus {
-    @apply .bg-gray-500 .border-gray-500;
+    @apply bg-gray-500 border-gray-500;
 }
 
 .btn.btn-white {
-    @apply  .bg-white .border-gray-400 .text-gray-800;
+    @apply  bg-white border-gray-400 text-gray-800;
 }
 
 .btn.btn-white:hover, .btn.btn-white:focus {
-    @apply .bg-gray-100;
+    @apply bg-gray-100;
 }
 
 .btn.btn-blue-outline {
-    @apply .bg-white .border-blue-500 .text-blue-600;
+    @apply bg-white border-blue-500 text-blue-600;
 }
 
 .btn.btn-blue-outline:hover, .btn.btn-blue-outline:focus {
-    @apply .bg-blue-500 .text-white .border-transparent;
+    @apply bg-blue-500 text-white border-transparent;
 }

assets/src/css/components/layout.css

@@ -1,35 +1,35 @@
 .card {
-    @apply .bg-white .shadow-lg .p-3;
+    @apply bg-white shadow-lg p-3;
 }
 
 .card.card-no-shadow {
-    @apply .shadow-none;
+    @apply shadow-none;
 }
 
 .card.card-border {
-    @apply .border;
+    @apply border;
 }
 
 .card.card-shadow-md {
-    @apply .shadow-md;
+    @apply shadow-md;
 }
 
 @screen sm {
     .card {
-        @apply .rounded-lg;
+        @apply rounded-lg;
     }
 }
 
 .badge {
-    @apply .items-center .text-white .leading-none .flex;
+    @apply items-center text-white leading-none flex;
 }
 
 .badge .badge-inner {
-    @apply .flex .rounded-full .uppercase .px-2 .py-1 .text-xs .font-bold;
+    @apply flex rounded-full uppercase px-2 py-1 text-xs font-bold;
 }
 
 @screen lg {
     .badge {
-        @apply .rounded-full .inline-flex;
+        @apply rounded-full inline-flex;
     }
 }

assets/src/css/components/navigation.css

@@ -1,20 +1,20 @@
 .nav-link {
-    @apply .no-underline .text-white .opacity-50 .flex .items-center .py-4 .border-b .border-transparent transition duration-300;
+    @apply no-underline text-white opacity-50 flex items-center py-4 border-b border-transparent transition duration-300;
 }
 
 .nav-link:hover, .nav-link:focus {
-    @apply .opacity-75;
+    @apply opacity-75;
 }
 
 .nav-link.active {
-    @apply .no-underline .opacity-100 .text-white .flex .items-center .py-4 transition duration-300;
+    @apply no-underline opacity-100 text-white flex items-center py-4 transition duration-300;
 }
 
 @screen lg {
     .nav-link {
-        @apply .text-gray-500 .py-2;
+        @apply text-gray-500 py-2;
     }
     .nav-link.active {
-        @apply .text-blue-500 .py-2; 
+        @apply text-blue-500 py-2; 
     }
 }

assets/src/css/components/notifications.css

@@ -1,35 +1,35 @@
 .notification {
-    @apply .border-t-4 .rounded-b .px-4 .py-3 .shadow-md .mb-2 .mr-2;
+    @apply border-t-4 rounded-b px-4 py-3 shadow-md mb-2 mr-2;
   }
 
   .notification-info {
-    @apply .bg-blue-100 .border-blue-500 .text-blue-900;
+    @apply bg-blue-100 border-blue-500 text-blue-900;
   }
 
   .notification-info .icon {
-    @apply .text-blue-500;
+    @apply text-blue-500;
   }
 
   .notification-success {
-    @apply .bg-teal-100 .border-teal-500 .text-teal-900;
+    @apply bg-green-100 border-green-500 text-green-900;
   }
 
   .notification-success .icon {
-    @apply .text-teal-500;
+    @apply text-green-500;
   }
 
   .notification-warning {
-    @apply .bg-orange-100 .border-orange-500 .text-orange-900;
+    @apply bg-yellow-100 border-yellow-500 text-yellow-900;
   }
 
   .notification-warning .icon {
-    @apply .text-orange-500;
+    @apply text-yellow-500;
   }
 
   .notification-error {
-    @apply .bg-red-100 .border-red-500 .text-red-900;
+    @apply bg-red-100 border-red-500 text-red-900;
   }
 
   .notification-error .icon {
-    @apply .text-red-500;
+    @apply text-red-500;
   }

assets/src/css/components/tables.css

@@ -1,19 +1,19 @@
 .table-wrapper {
-    @apply .overflow-x-auto .w-full .block;
+    @apply overflow-x-auto w-full block;
   }
 
   .table {
-    @apply .w-full .max-w-full;
+    @apply w-full max-w-full;
   }
 
   .table th {
-    @apply .p-2 .text-left;
+    @apply p-2 text-left;
   }
 
   .table tbody tr:hover {
-    @apply .bg-gray-200;
+    @apply bg-gray-200;
   }
 
   .table td {
-    @apply .border-t .p-2;
+    @apply border-t p-2;
   }

assets/src/js/components/ChangePasswordModal.vue

@@ -9,7 +9,7 @@
                         </label>
                     </div>
                     <div class="md:w-2/3">
-                        <input v-model="form.old_password" class="form-input w-full my-1" name="old_password" id="old_password" type="password">
+                        <input v-model="form.old_password" class="form-inputborder-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="old_password" id="old_password" type="password">
                     </div>
                 </div>
                 <div class="md:flex md:items-center mb-6 mt-4">
@@ -19,7 +19,7 @@
                         </label>
                     </div>
                     <div class="md:w-2/3">
-                        <input v-model="form.new_password1" class="form-input w-full my-1" name="new_password1" id="new_password1" type="password" required>
+                        <input v-model="form.new_password1" class="form-inputborder-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="new_password1" id="new_password1" type="password" required>
                     </div>
                 </div>
                 <div class="md:flex md:items-center mb-6 mt-4">
@@ -29,7 +29,7 @@
                         </label>
                     </div>
                     <div class="md:w-2/3">
-                        <input v-model="form.new_password2" class="form-input w-full my-1" name="new_password2" id="new_password2" type="password" required>
+                        <input v-model="form.new_password2" class="form-inputborder-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="new_password2" id="new_password2" type="password" required>
                     </div>
                 </div>
             </div>

assets/src/js/components/ListEntryForm.vue

@@ -10,7 +10,7 @@
                     </label>
                 </div>
                 <div class="md:w-3/4">
-                    <select v-model="listing_choice_from" @change="from_reset" name="from_select" class="form-select w-full my-1" required>
+                    <select v-model="listing_choice_from" @change="from_reset" name="from_select" class="form-select border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" required>
                         <option value="">-- Select From --</option>
                         <option value="from_address">Senders email address or domain</option>
                         <option value="from_ip_address">Senders IP-address</option>
@@ -39,7 +39,7 @@
                 </label>
             </div>
             <div class="md:w-3/4">
-                <input class="form-input w-full my-1" name="from_ip_address" v-model="from_ip_address" id="from_ip_address" type="text" placeholder="111.222.333.444" :required="listing_choice_from == 'from_ip_address'">
+                <input class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="from_ip_address" v-model="from_ip_address" id="from_ip_address" type="text" placeholder="111.222.333.444" :required="listing_choice_from == 'from_ip_address'">
             </div>
         </div>
 
@@ -51,7 +51,7 @@
                     </label>
                 </div>
                 <div class="md:w-3/4">
-                    <select v-model="listing_choice_to" @change="to_reset" name="to_select" class="form-select w-full my-1" required>
+                    <select v-model="listing_choice_to" @change="to_reset" name="to_select" class="form-select border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" required>
                         <option value="">-- Select To --</option>
                         <option value="to_address">Recipients email address or domain</option>
                         <option value="to_ip_address">Recipients IP-address</option>
@@ -69,7 +69,7 @@
             <div class="md:w-3/4 inline-flex">
                 <input class="bg-gray-200 appearance-none border border-gray-200 hover:border-blue-500 rounded py-2 px-4 text-gray-700" name="to_address" v-model="to" id="to_address" type="text" placeholder="JohnDoe">
                 <span class="select-none bg-gray-200 appearance-none border border-gray-200 py-2 px-4 text-gray-700">@</span>
-                <input class="form-input w-full my-1" name="to_domain" v-model="to_domain" id="to_domain" type="text" placeholder="example.com" :required="listing_choice_to == 'to_address'">                    
+                <input class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="to_domain" v-model="to_domain" id="to_domain" type="text" placeholder="example.com" :required="listing_choice_to == 'to_address'">                    
             </div>
         </div>
 
@@ -80,7 +80,7 @@
                 </label>
             </div>
             <div class="md:w-3/4">
-                <input class="form-input w-full my-1" name="to_ip_address" v-model="to_ip_address" id="to_ip_address" type="text" placeholder="111.222.333.444" :required="listing_choice_to == 'to_ip_address'">
+                <input class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="to_ip_address" v-model="to_ip_address" id="to_ip_address" type="text" placeholder="111.222.333.444" :required="listing_choice_to == 'to_ip_address'">
             </div>
         </div>
         <div class="px-6 py-4 border-t bg-gray-100 rounded-b">

assets/src/js/components/MainWrapper.vue

@@ -38,7 +38,7 @@
         </div>
         <div class="lg:flex">
             <!-- Secondary -->
-            <div v-if="isLoggedIn" class="bg-cool-gray-800 lg:block lg:bg-transparent lg:border-b lg:w-1/5 xxl:w-1/6 pt-12 lg:pt-16 lg:h-screen" :class="{ 'hidden' : hide, 'shadow-md' : !hide }">
+            <div v-if="isLoggedIn" class="bg-gray-800 lg:block lg:bg-transparent lg:border-b lg:w-1/5 xxl:w-1/6 pt-12 lg:pt-16 lg:h-screen" :class="{ 'hidden' : hide, 'shadow-md' : !hide }">
                 <div class="container mx-auto px-4">
                     <div class="">
                         <div class="flex -mb-px" @click="hideMenu()">

assets/src/js/pages/Admin/Domains/Form.vue

@@ -10,7 +10,7 @@
                         </label>
                     </div>
                     <div class="md:w-1/2">
-                        <input v-model="form.name" class="form-input w-full my-1" name="name" id="name" type="text" placeholder="example.com" required>
+                        <input v-model="form.name" class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="name" id="name" type="text" placeholder="example.com" required>
                     </div>
                 </div>
                 <div class="md:flex md:items-center mb-6">
@@ -20,7 +20,7 @@
                         </label>
                     </div>
                     <div class="md:w-1/2">
-                        <input v-model="form.destination" class="form-input w-full my-1" name="destination" id="destination" type="text" placeholder="mail.example.com" required>
+                        <input v-model="form.destination" class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="destination" id="destination" type="text" placeholder="mail.example.com" required>
                     </div>
                 </div>
                 <div class="md:flex md:items-center mb-6">
@@ -30,7 +30,7 @@
                         </label>
                     </div>
                     <div class="md:w-1/2 md:inline-flex">
-                        <select v-model="form.relay_type" name="relay_type" class="form-select w-full my-1">
+                        <select v-model="form.relay_type" name="relay_type" class="form-select border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1">
                             <option value="">Select relay type</option>
                             <option value="smtp">Deliver to my email server (SMTP)</option>
                             <option value="smtps">Deliver to my email server (SMTP with SSL/TLS)</option>
@@ -44,7 +44,7 @@
                         </label>
                     </div>
                     <div class="md:w-1/2 md:inline-flex">
-                        <select v-model="form.receive_type" name="receive_type" class="form-select w-full my-1">
+                        <select v-model="form.receive_type" name="receive_type" class="form-select border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1">
                             <option value="">Select Receive type</option>
                             <option value="load_balanced">Balance between nodes</option>
                             <option value="failover">Use the primary node and fail over if unavailable</option>
@@ -109,7 +109,7 @@
                         </label>
                     </div>
                     <div class="md:w-1/2">
-                        <input v-model="form.allowed_accounts" class="form-input w-full my-1" name="allowed_accounts" id="allowed_accounts" type="number" required min="-1">
+                        <input v-model="form.allowed_accounts" class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" name="allowed_accounts" id="allowed_accounts" type="number" required min="-1">
                     </div>
                 </div>
                 <div class="flex flex-row-reverse border-t pt-2">

assets/src/js/pages/Admin/Domains/Index.vue

@@ -7,7 +7,7 @@
             <div class="w-full py-2">
                 <form @submit.prevent="get_search">
                     <div class="flex text-sm items-center">
-                        <input type="text" name="search" class="form-input w-full my-1" v-model="search" placeholder="Type something here..."/>
+                        <input type="text" name="search" class="form-input border-1 bg-gray-100 text-sm border-gray-100 pl-4 pr-4 text-gray-900 rounded w-full my-1" v-model="search" placeholder="Type something here..."/>
                         <button type="submit" class="btn btn-blue shadow">
                             Search
                         </button>