v2

Author: khatabwedaa

README.md

@@ -18,13 +18,13 @@ This package requires Laravel 7.0 or higher.
 
 ### a. Preset WITHOUT Authentication
 
-1. Use `php artisan ui tailwindcss` for the basic Tailwind CSS preset, you can use dark mode too `php artisan ui tailwindcss:dark` 
+1. Use `php artisan ui tailwindcss` for the basic Tailwind CSS preset.
 2. `npm install && npm run dev`
 3. `php artisan serve` (or equivalent) to run server and test preset.
 
 ### b. Preset WITH Authentication
 
-1. Use `php artisan ui tailwindcss --auth` for the basic preset, for the dark mode `php artisan ui tailwindcss:dark --auth`, auth route entry, and Tailwind CSS auth views in one go. (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in `routes/web.php`)
+1. Use `php artisan ui tailwindcss --auth` for the basic preset, auth route entry, and Tailwind CSS auth views in one go. (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in `routes/web.php`)
 4. `npm install && npm run dev`
 5. Configure your favorite database (mysql, sqlite etc.)
 6. `php artisan migrate` to create basic user tables.
@@ -36,8 +36,6 @@ The default `tailwind.config.js` configuration file included by this package sim
 
 ## Screenshots
 
-### Light
-
 ![Dashboard](/screenshots/dashboard.png)
 
 ![Login](/screenshots/#.png)
@@ -53,21 +51,3 @@ The default `tailwind.config.js` configuration file included by this package sim
 ![Pagination](/screenshots/pagination.png)
 
 ![Pagination](/screenshots/pagination-simple.png)
-
-## Dark
-
-![Dashboard](/screenshots/dashboard-dark.png)
-
-![Login](/screenshots/#-dark.png)
-
-![Register](/screenshots/register-dark.png)
-
-![Reset Password](/screenshots/reset-password-email-dark.png)
-
-![Reset Password](/screenshots/reset-password-dark.png)
-
-![Verify](/screenshots/verify-dark.png)
-
-![Pagination](/screenshots/pagination-dark.png)
-
-![Pagination](/screenshots/pagination-simple-dark.png)

screenshots/dashboard-dark.png

@@ -10,7 +10,7 @@
 
             <label class="block">
                 <span class="text-gray-700 text-sm">{{ __('E-Mail Address') }}</span>
-                <input type="email" id="email" name="email" class="mt-1 block w-full rounded-md" value="{{ old('email') }}" required autocomplete="email" autofocus>
+                <input type="email" id="email" name="email" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="{{ old('email') }}" required autocomplete="email" autofocus>
 
                 @error('email')
                     <span class="text-sm text-red-500" role="alert">
@@ -21,7 +21,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('Password') }}</span>
-                <input id="password" type="password" class="mt-1 block w-full rounded-md" name="password" required autocomplete="current-password">
+                <input id="password" type="password" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="password" required autocomplete="current-password">
 
                 @error('password')
                     <span class="text-sm text-red-500" role="alert">
@@ -33,7 +33,7 @@
             <div class="flex justify-between items-center mt-4">
                 <div>
                     <label class="inline-flex items-center">
-                        <input type="checkbox" class="rounded text-blue-600" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
+                        <input type="checkbox" class="rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                         <span class="mx-2 text-gray-600 text-sm">{{ __('Remember Me') }}</span>
                     </label>
                 </div>

screenshots/#-dark.png

@@ -12,7 +12,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('Password') }}</span>
-                <input id="password" type="password" class="mt-1 block w-full rounded-md" name="password" required autocomplete="current-password">
+                <input id="password" type="password" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="password" required autocomplete="current-password">
 
                 @error('password')
                     <span class="text-sm text-red-500" role="alert">

screenshots/pagination-dark.png

@@ -24,7 +24,7 @@
 
             <label class="block">
                 <span class="text-gray-700 text-sm">{{ __('E-Mail Address') }}</span>
-                <input id="email" type="email" class="mt-1 block w-full rounded-md" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+                <input id="email" type="email" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
             </label>
 
             <div class="mt-6">

screenshots/pagination-simple-dark.png

@@ -12,7 +12,7 @@
 
             <label class="block">
                 <span class="text-gray-700 text-sm">{{ __('E-Mail Address') }}</span>
-                <input id="email" type="email" class="mt-1 block w-full rounded-md" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
+                <input id="email" type="email" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
 
                 @error('email')
                     <span class="text-sm text-red-500" role="alert">
@@ -23,7 +23,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('Password') }}</span>
-                <input id="password" type="password" class="mt-1 block w-full rounded-md" name="password" required autocomplete="new-password">
+                <input id="password" type="password" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="password" required autocomplete="new-password">
 
                 @error('password')
                     <span class="text-sm text-red-500" role="alert">
@@ -34,7 +34,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('Confirm Password') }}</span>
-                <input id="password-confirm" type="password" class="mt-1 block w-full rounded-md" name="password_confirmation" required autocomplete="new-password">
+                <input id="password-confirm" type="password" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="password_confirmation" required autocomplete="new-password">
             </label>
 
             <div class="mt-6">

screenshots/register-dark.png

@@ -10,7 +10,7 @@
 
             <label class="block">
                 <span class="text-gray-700 text-sm">{{ __('Name') }}</span>
-                <input id="name" type="text" class="mt-1 block w-full rounded-md" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
+                <input id="name" type="text" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
 
                 @error('name')
                     <span class="text-sm text-red-500" role="alert">
@@ -21,7 +21,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('E-Mail Address') }}</span>
-                <input id="email" type="email" class="mt-1 block w-full rounded-md" name="email" value="{{ old('email') }}" required autocomplete="email">
+                <input id="email" type="email" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="email" value="{{ old('email') }}" required autocomplete="email">
 
                 @error('email')
                     <span class="text-sm text-red-500" role="alert">
@@ -32,7 +32,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('Password') }}</span>
-                <input id="password" type="password" class="mt-1 block w-full rounded-md" name="password" required autocomplete="new-password">
+                <input id="password" type="password" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="password" required autocomplete="new-password">
 
                 @error('password')
                     <span class="text-sm text-red-500" role="alert">
@@ -43,7 +43,7 @@
 
             <label class="block mt-3">
                 <span class="text-gray-700 text-sm">{{ __('Confirm Password') }}</span>
-                <input id="password-confirm" type="password" class="mt-1 block w-full rounded-md" name="password_confirmation" required autocomplete="new-password">
+                <input id="password-confirm" type="password" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="password_confirmation" required autocomplete="new-password">
             </label>
 
             <div class="mt-6">

screenshots/reset-password-dark.png

@@ -11,7 +11,7 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js').vue();
+mix.js('resources/js/app.js', 'public/js');
 
 mix.postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss'),