replaced card and button components with tailwind custom classes

Author: dcblogdev

stubs/resources/sass/app.scss

@@ -13,33 +13,51 @@
     }
 
     h1 {
-        @apply
-        text-2xl text-gray-600 dark:text-gray-200
+        @apply text-2xl text-gray-600 dark:text-gray-200;
     }
 
     h2 {
-        @apply
-        py-2 text-2xl text-gray-600 dark:text-gray-300
+        @apply py-2 text-2xl text-gray-600 dark:text-gray-300;
     }
 
     h3 {
-        @apply
-        py-2 text-xl text-gray-600 dark:text-gray-300
+        @apply py-2 text-xl text-gray-600 dark:text-gray-300;
     }
 
     p {
-        @apply
-        py-2 dark:text-gray-300
+        @apply py-2 dark:text-gray-300;
+    }
+
+    table {
+        @apply w-full;
+    }
+
+    th {
+        @apply px-2 py-3;
+    }
+
+    td {
+        @apply p-2 border-t;
+    }
+
+    thead tr {
+        @apply text-left bg-gray-100 text-gray-600;
+    }
+
+    tbody tr {
+        @apply hover:bg-gray-100 dark:hover:bg-blue-500 focus-within:bg-gray-100;
+    }
+
+    hr {
+        @apply border-t border-gray-300;
+    }
+
+    .input {
+        @apply w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none sm:text-sm;
     }
 
     .alert {
-        @apply
-            rounded-md
-            shadow-md
-            text-sm
-            font-medium
-            p-4
-            mb-5;
+        @apply rounded-md shadow-md text-sm font-medium p-4 mb-5;
 
         &.alert-green {
             @apply bg-green-500 text-green-200;
@@ -90,48 +108,124 @@
         }
     }
 
-    .button {
-        @apply
-            inline-flex
-            items-center
-            py-2
-            px-4
-            border
-            rounded-md
-            text-sm
-            font-medium;
+    .btn {
+        @apply inline-flex items-center py-2 px-4 border rounded-md text-sm font-medium;
+
+        &.btn-green {
+            @apply bg-green-600 hover:bg-green-500 border-green-600 text-white;
+        }
+
+        &.btn-red {
+            @apply bg-red-600 hover:bg-red-500 border-red-600 text-white;
+        }
+
+        &.btn-yellow {
+            @apply bg-yellow-600 hover:bg-yellow-500 border-yellow-600 text-white;
+        }
+
+        &.btn-blue {
+            @apply bg-blue-600 hover:bg-blue-500 border-blue-600 text-white;
+        }
+
+        &.btn-gray {
+            @apply bg-gray-600 hover:bg-gray-500 border-gray-600 text-white;
+        }
+
+        &.btn-indigo {
+            @apply bg-indigo-600 hover:bg-indigo-500 border-indigo-600 text-white;
+        }
+
+        &.btn-purple {
+            @apply bg-purple-600 hover:bg-purple-500 border-purple-600 text-white;
+        }
+
+        &.btn-pink {
+            @apply bg-pink-600 hover:bg-pink-500 border-pink-600 text-white;
+        }
+    }
+
+    .btn-sm {
+        @apply inline-flex items-center py-1 px-2 border rounded-md text-sm font-medium;
 
-        &.button-green {
+        &.btn-green {
             @apply bg-green-600 hover:bg-green-500 border-green-600 text-white;
         }
 
-        &.button-red {
+        &.btn-red {
             @apply bg-red-600 hover:bg-red-500 border-red-600 text-white;
         }
 
-        &.button-yellow {
+        &.btn-yellow {
             @apply bg-yellow-600 hover:bg-yellow-500 border-yellow-600 text-white;
         }
 
-        &.button-blue {
+        &.btn-blue {
             @apply bg-blue-600 hover:bg-blue-500 border-blue-600 text-white;
         }
 
-        &.button-gray {
+        &.btn-gray {
             @apply bg-gray-600 hover:bg-gray-500 border-gray-600 text-white;
         }
 
-        &.button-indigo {
+        &.btn-indigo {
             @apply bg-indigo-600 hover:bg-indigo-500 border-indigo-600 text-white;
         }
 
-        &.button-purple {
+        &.btn-purple {
             @apply bg-purple-600 hover:bg-purple-500 border-purple-600 text-white;
         }
 
-        &.button-pink {
+        &.btn-pink {
             @apply bg-pink-600 hover:bg-pink-500 border-pink-600 text-white;
         }
     }
+
+    .link-green {
+        @apply text-green-600 hover:text-green-500;
+    }
+
+    .link-red {
+        @apply text-red-600 hover:text-red-500;
+    }
+
+    .link-yellow {
+        @apply text-yellow-600 hover:text-yellow-500;
+    }
+
+    .link-blue {
+        @apply text-blue-600 hover:text-blue-500;
+    }
+
+    .link-gray {
+        @apply text-gray-600 hover:text-gray-500;
+    }
+
+    .link-indigo {
+        @apply text-indigo-600 hover:text-indigo-500;
+    }
+
+    .link-purple {
+        @apply text-purple-600 hover:text-purple-500;
+    }
+
+    .link-pink {
+        @apply text-pink-600 hover:text-pink-500;
+    }
+
+    .error {
+        @apply text-red-500
+    }
+
+    .card {
+        @apply bg-white dark:bg-gray-800 dark:text-white shadow rounded-md overflow-x-auto my-5 px-4 py-5
+    }
+
+    .card-no-padding {
+        @apply bg-white dark:bg-gray-800 dark:text-white shadow rounded-md overflow-x-auto
+    }
+
+    .col2 {
+        @apply grid md:grid-cols-2 gap-10
+    }
 }
 

stubs/resources/views/app/dashboard.blade.php

@@ -2,10 +2,8 @@
 
     <x-slot name="title">Dashboard</x-slot>
 
-    <x-card>
+    <div class="card">
         You're logged in!
-    </x-card>
-
-
+    </div>
 
 </x-app-layout>

stubs/resources/views/auth/confirm-password.blade.php

@@ -18,18 +18,13 @@
 
             <!-- Password -->
             <div>
-                <x-label for="password" :value="__('Password')" />
-
-                <x-input id="password" class="block mt-1 w-full"
-                                type="password"
-                                name="password"
-                                required autocomplete="current-password" />
+                <x-form.input type="password" label="Password" name="password"></x-form.input>
             </div>
 
             <div class="flex justify-end mt-4">
-                <x-button>
+                <button class="btn btn-blue">
                     {{ __('Confirm') }}
-                </x-button>
+                </button>
             </div>
         </form>
     </x-auth-card>

stubs/resources/views/auth/forgot-password.blade.php

@@ -21,15 +21,13 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
-
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-form.input label="Email" name="email">{{ old('email') }}</x-form.input>
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <x-button>
+                <button class="btn btn-blue">
                     {{ __('Email Password Reset Link') }}
-                </x-button>
+                </button>
             </div>
         </form>
     </x-auth-card>

stubs/resources/views/auth/login.blade.php

@@ -17,14 +17,12 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-form.input label="Email" name="email">{{ old('email') }}</x-form.input>
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
+                <x-form.input type="password" label="Password" name="password"></x-form.input>
             </div>
 
             <!-- Remember Me -->
@@ -35,16 +33,16 @@
                 </label>
             </div>
 
-            <div class="flex items-center justify-end mt-4">
+            <div class="flex justify-between mt-4">
                 @if (Route::has('password.request'))
                     <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                         {{ __('Forgot your password?') }}
                     </a>
                 @endif
 
-                <x-button class="ml-3">
+                <button class="btn btn-blue">
                     {{ __('Log in') }}
-                </x-button>
+                </button>
             </div>
         </form>
     </x-auth-card>

stubs/resources/views/auth/register.blade.php

@@ -14,45 +14,32 @@
 
             <!-- Name -->
             <div>
-                <x-label for="name" :value="__('Name')" />
-
-                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
+                <x-form.input label="Name" name="name">{{ old('name') }}</x-form.input>
             </div>
 
             <!-- Email Address -->
             <div class="mt-4">
-                <x-label for="email" :value="__('Email')" />
-
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
+                <x-form.input label="Email" name="email">{{ old('email') }}</x-form.input>
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
-
-                <x-input id="password" class="block mt-1 w-full"
-                                type="password"
-                                name="password"
-                                required autocomplete="new-password" />
+                <x-form.input type="password" label="Password" name="password"></x-form.input>
             </div>
 
             <!-- Confirm Password -->
             <div class="mt-4">
-                <x-label for="password_confirmation" :value="__('Confirm Password')" />
-
-                <x-input id="password_confirmation" class="block mt-1 w-full"
-                                type="password"
-                                name="password_confirmation" required />
+                <x-form.input type="password" label="Comfirm Password" name="password_confirmation"></x-form.input>
             </div>
 
             <div class="flex items-center justify-end mt-4">
                 <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                     {{ __('Already registered?') }}
                 </a>
 
-                <x-button class="ml-4">
+                <button class="ml-4 btn btn-blue">
                     {{ __('Register') }}
-                </x-button>
+                </button>
             </div>
         </form>
     </x-auth-card>

stubs/resources/views/auth/reset-password.blade.php

@@ -17,31 +17,23 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
-
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus />
+                <x-form.input label="Email" name="email">{{ old('email') }}</x-form.input>
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
-
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required />
+                <x-form.input type="password" label="Password" name="password"></x-form.input>
             </div>
 
             <!-- Confirm Password -->
             <div class="mt-4">
-                <x-label for="password_confirmation" :value="__('Confirm Password')" />
-
-                <x-input id="password_confirmation" class="block mt-1 w-full"
-                                    type="password"
-                                    name="password_confirmation" required />
+                <x-form.input type="password" label="Confirm Password" name="password_confirmation"></x-form.input>
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <x-button>
+                <button class="btn btn-blue">
                     {{ __('Reset Password') }}
-                </x-button>
+                </button>
             </div>
         </form>
     </x-auth-card>