feat(assets): Change default CSS framework to Tailwind

* enhance(view): Add light default styling for Tailwind
* chore(view): Clean up unnecessary selectors and spacing
* feat(acorn): Update Acorn for Laravel 8.x
* chore(acorn): Create default `bootstrap/` project directory for Laravel 8.x
* refactor(acorn): Split the Acorn bootloader between `functions.php` and `bootstrap/app.php` to coincide with Laravel
* refactor(assets): Lighten the out of the box CSS boilerplate
* refactor(assets): Rename `dist/` to `public/` to coincide with Laravel
* refactor(assets): Flatten the `assets/` directory into `resources/` to coincide with Laravel
* refactor(assets): Rename `scripts/` to `js/` to coincide with Laravel
* refactor(assets): Rename `styles/` to `css/` to coincide with Laravel
* feat(deps): Update to Laravel Mix ^6.0
* chore(deps): Change Mix-related package.json `scripts` to the new `mix` binary
* chore(deps): Remove PurgeCSS in favor of Tailwind's built in purge
* chore(deps): Remove deprecated/unnecessary/unused dependencies
* chore(deps): Bump minimum PHP version to 7.3 to coincide with Laravel 8.x

resources/assets/styles/app.scss

@@ -1,12 +0,0 @@
-/** Config */
-@import 'config/variables';
-@import 'config/external';
-
-/** Common */
-@import 'common/global';
-
-/** Components */
-@import 'components';
-
-/** Partials */
-@import 'partials/header';

resources/assets/styles/common/global.scss

@@ -1,22 +0,0 @@
-/**
- * Global
- */
-
-a {
-  color: map-get($theme-colors, 'primary');
-}
-
-/**
- * Block editor color palette utilities
- * @see https://git.io/JeyD6
- */
-
-@each $color-name, $color-value in $theme-colors {
-  .has-#{$color-name}-color {
-    color: $color-value;
-  }
-
-  .has-#{$color-name}-background-color {
-    background-color: $color-value;
-  }
-}

resources/assets/styles/components/button.scss

@@ -1,36 +0,0 @@
-/**
- * Button
- */
-
-.wp-block-button {
-  &__link {
-    font-size: $btn-font-size;
-    line-height: $btn-line-height;
-    padding-bottom: $btn-padding-y;
-    padding-left: $btn-padding-x;
-    padding-right: $btn-padding-x;
-    padding-top: $btn-padding-y;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  &.is-style-outline {
-    .wp-block-button__link {
-      @include button-outline-variant(
-        map-get($theme-colors, 'primary'),
-        map-get($theme-colors, 'light')
-      );
-    }
-  }
-
-  &.is-style-solid {
-    .wp-block-button__link {
-      @include button-variant(
-        map-get($theme-colors, 'primary'),
-        map-get($theme-colors, 'light')
-      );
-    }
-  }
-}

resources/assets/styles/components/index.scss

@@ -1,5 +0,0 @@
-/**
- * Components
- */
-
-@import 'button';

resources/assets/styles/config/external.scss

@@ -1,5 +0,0 @@
-/**
- * External
- */
-
-@import '~bootstrap/scss/bootstrap';

resources/assets/styles/config/variables.scss

@@ -1,7 +0,0 @@
-/**
- * Variables
- */
-
-$theme-colors: (
-  primary: #525ddc,
-);

resources/assets/styles/editor.scss

@@ -1,16 +0,0 @@
-/**
- * Editor
- */
-
-@import 'config/variables';
-
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
-
-.editor-styles-wrapper > * {
-  @import 'common/global';
-  @import 'components';
-
-  font-family: $font-family-base;
-}

resources/assets/styles/partials/header.scss

@@ -1,7 +0,0 @@
-/**
- * Header
- */
-
-.brand {
-  font-weight: bold;
-}

resources/css/app.scss

@@ -0,0 +1,6 @@
+@import 'tailwindcss/base';
+
+@import 'common/global';
+
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

resources/css/common/global.scss

@@ -0,0 +1,7 @@
+body {
+  @apply font-sans;
+}
+
+.brand {
+  @apply text-3xl font-medium text-indigo-500;
+}

resources/css/editor.scss

@@ -0,0 +1,11 @@
+.block-editor-block-list__layout {
+  @apply font-sans;
+}
+
+.wp-block {
+  @apply max-w-screen-md;
+
+  &.editor-post-title__block .editor-post-title__input {
+    @apply font-sans #{!important};
+  }
+}

resources/js/app.js

@@ -2,7 +2,6 @@
  * External Dependencies
  */
 import 'jquery';
-import 'bootstrap';
 
 $(document).ready(() => {
   // console.log('Hello world');

resources/views/components/alert.blade.php

@@ -1,3 +1,5 @@
-<div class="alert alert-{{ $type }}">
-  {!! $message ?? $slot !!}
+<div {{ $attributes->merge(['class' => $type]) }}>
+  <div class="px-4 py-3">
+    {!! $message ?? $slot !!}
+  </div>
 </div>

resources/views/forms/search.blade.php

@@ -1,17 +1,21 @@
 <form role="search" method="get" class="search-form" action="{{ home_url('/') }}">
   <label>
-    <span class="screen-reader-text">
+    <span class="sr-only">
       {{ _x('Search for:', 'label', 'sage') }}
     </span>
 
     <input
       type="search"
-      class="search-field"
+      class="px-3 py-1 border"
       placeholder="{!! esc_attr_x('Search &hellip;', 'placeholder', 'sage') !!}"
       value="{{ get_search_query() }}"
       name="s"
     >
   </label>
 
-  <input type="submit" class="button" value="{{ esc_attr_x('Search', 'submit button', 'sage') }}">
+  <input
+    type="submit"
+    class="px-3 py-1 text-white bg-indigo-500 cursor-pointer"
+    value="{{ esc_attr_x('Search', 'submit button', 'sage') }}"
+  >
 </form>

resources/views/layouts/app.blade.php

@@ -1,15 +1,15 @@
-@include('partials.header')
+<div class="max-w-3xl mx-auto">
+  @include('partials.header')
 
-<div class="container">
-  <main class="main">
-    @yield('content')
-  </main>
+    <main class="py-8 prose main">
+      @yield('content')
+    </main>
 
-  @hasSection('sidebar')
-    <aside class="sidebar">
-      @yield('sidebar')
-    </aside>
-  @endif
+    @hasSection('sidebar')
+      <aside class="sidebar">
+        @yield('sidebar')
+      </aside>
+    @endif
+
+  @include('partials.footer')
 </div>
-
-@include('partials.footer')

resources/views/partials/content-page.blade.php

@@ -1,2 +1,3 @@
 @php(the_content())
+
 {!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}

resources/views/partials/footer.blade.php

@@ -1,5 +1,3 @@
 <footer class="content-info">
-  <div class="container">
-    @php(dynamic_sidebar('sidebar-footer'))
-  </div>
+  @php(dynamic_sidebar('sidebar-footer'))
 </footer>

resources/views/partials/header.blade.php

@@ -1,5 +1,5 @@
 <header class="banner">
-  <div class="container">
+  <div class="max-w-3xl mx-auto">
     <a class="brand" href="{{ home_url('/') }}">
       {{ $siteName }}
     </a>