replace Bootstrap with Tailwind

Author: michaeldyrynda

src/InertiaJsPreset.php

@@ -17,7 +17,6 @@ public static function install($command)
         static::$command = $command;
 
         static::updatePackages();
-        static::installBootstrapDefault();
         static::updateComposer(false);
         static::updateBootstrapping();
         static::updateWelcomePage();
@@ -87,23 +86,6 @@ protected static function scaffoldRoutes()
         copy(__DIR__.'/inertiajs-stubs/routes/web.php', base_path('routes/web.php'));
     }
 
-    protected static function installBootstrapDefault()
-    {
-        if (! file_exists(base_path('composer.json'))) {
-            return;
-        }
-
-        tap(new Process('composer require --dev laravel/ui=^1.0', base_path()), function ($process) {
-            $process->run();
-
-            Artisan::call('preset bootstrap', [], static::$command->getOutput());
-        });
-
-        tap(new Process('composer remove --dev laravel/ui', base_path()), function ($process) {
-            $process->run();
-        });
-    }
-
     protected static function updateComposer($dev = true)
     {
         if (! file_exists(base_path('composer.json'))) {

src/inertiajs-stubs/resources/js/Pages/About.vue

@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <h1>About</h1>
+    <h1 class="text-2xl font-semibold mb-3">About</h1>
     <p>About my first Inertia.js app!</p>
   </layout>
 </template>

src/inertiajs-stubs/resources/js/Pages/Contact.vue

@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <h1>Contact</h1>
+    <h1 class="text-2xl font-semibold mb-3">Contact</h1>
     <p>Contact me about my first Inertia.js app!</p>
   </layout>
 </template>

src/inertiajs-stubs/resources/js/Pages/Welcome.vue

@@ -1,6 +1,6 @@
 <template>
   <layout>
-    <h1>Welcome</h1>
+    <h1 class="text-2xl font-semibold mb-3">Welcome</h1>
     <p>Welcome to my first Inertia.js app!</p>
   </layout>
 </template>

src/inertiajs-stubs/resources/js/Shared/Layout.vue

@@ -1,39 +1,23 @@
 <template>
-  <div>
-    <header>
-      <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
-        <div class="container">
-          <inertia-link class="navbar-brand" href="/">Inertia.js</inertia-link>
+    <div>
+        <navbar />
 
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-
-          <div class="collapse navbar-collapse" id="mainNav">
+        <main>
+            <div class="w-full max-w-6xl mx-auto p-4">
+                <article>
+                    <slot />
+                </article>
+            </div>
+        </main>
+    </div>
+</template>
 
-            <ul class="navbar-nav mr-auto">
-              <li class="nav-item">
-                <inertia-link class="nav-link" href="/about">About</inertia-link>
-              </li>
-              <li class="nav-item">
-                <inertia-link class="nav-link" href="/contact">Contact</inertia-link>
-              </li>
-            </ul>
+<script>
+import Navbar from '@/Shared/Navbar'
 
-          </div>
-        </div>
-      </nav>
-    </header>
-    <main class="py-4">
-      <div class="container">
-        <div class="row">
-          <div class="col">
-            <article>
-              <slot />
-            </article>
-          </div>
-        </div>
-      </div>
-    </main>
-  </div>
-</template>
+export default {
+     components: {
+         Navbar,
+     }
+}
+</script>

src/inertiajs-stubs/resources/js/Shared/Navbar.vue

@@ -0,0 +1,35 @@
+<template>
+    <header class="bg-white shadow">
+        <div class="w-full max-w-6xl mx-auto sm:flex sm:justify-between sm:items-center sm:px-4 sm:py-3">
+            <div class="flex justify-between items-center px-4 py-3 sm:p-0">
+                <div>
+                    <inertia-link class="navbar-brand" href="/">Inertia.js</inertia-link>
+                </div>
+
+                <div class="sm:hidden">
+                    <button @click="isOpen = !isOpen" type="button" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+                            <path v-if="isOpen" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
+                            <path v-if="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <nav :class="isOpen ? 'block' : 'hidden'" class="px-2 pb-4 sm:flex sm:p-0">
+                <inertia-link class="block px-2 py-1 text-gray-700 font-semibold rounded hover:bg-gray-100 focus:bg-gray-100 focus:outline-none" href="/about">About</inertia-link>
+                <inertia-link class="mt-1 block px-2 py-1 text-gray-700 font-semibold rounded hover:bg-gray-100 focus:bg-gray-100 focus:outline-none sm:mt-0 sm:ml-2" href="/contact">Contact</inertia-link>
+            </nav>
+        </div>
+    </header>
+</template>
+
+<script>
+export default {
+    data() { 
+        return {
+            isOpen: false,
+        }
+    }
+}
+</script>

src/inertiajs-stubs/resources/sass/app.scss

@@ -1,15 +1,9 @@
 
+// Tailwind
+@import url('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css');
+
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Nunito');
 
 // Variables
-@import 'variables';
 @import 'nprogress';
-
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';
-
-.navbar-laravel {
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-}