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

.gitignore

@@ -1,5 +1,5 @@
 /node_modules
 /vendor
-/dist
+/public
 npm-debug.log
 yarn-error.log

README.md

@@ -98,6 +98,8 @@ themes/your-theme-name/   # → Root of your Sage based theme
 │   ├── filters.php       # → Theme filters
 │   ├── helpers.php       # → Helper functions
 │   └── setup.php         # → Theme setup
+├── bootstrap/            # → Acorn bootstrap
+│   ├── cache/            # → Acorn cache location (never edit)
 ├── config/               # → Config files
 │   ├── app.php           # → Application configuration
 │   ├── assets.php        # → Asset configuration
@@ -106,17 +108,16 @@ themes/your-theme-name/   # → Root of your Sage based theme
 │   └── view.php          # → View configuration
 ├── composer.json         # → Autoloading for `app/` files
 ├── composer.lock         # → Composer lock file (never edit)
-├── dist/                 # → Built theme assets (never edit)
+├── public/               # → Built theme assets (never edit)
 ├── functions.php         # → Theme bootloader
 ├── index.php             # → Theme template wrapper
 ├── node_modules/         # → Node.js packages (never edit)
 ├── package.json          # → Node.js dependencies and scripts
 ├── resources/            # → Theme assets and templates
-│   ├── assets/           # → Front-end assets
+│   ├── fonts/            # → Theme fonts
-│   │   ├── fonts/        # → Theme fonts
+│   ├── images/           # → Theme images
-│   │   ├── images/       # → Theme images
+│   ├── js/               # → Theme javascript
-│   │   ├── scripts/      # → Theme javascript
+│   ├── css/              # → Theme stylesheets
-│   │   └── styles/       # → Theme stylesheets
 │   └── views/            # → Theme templates
 │       ├── components/   # → Component templates
 │       ├── form/         # → Form templates

app/View/Components/Alert.php

@@ -20,6 +20,18 @@ class Alert extends Component
      */
     public $message;
 
+    /**
+     * The alert types.
+     *
+     * @var array
+     */
+    public $types = [
+        'default' => 'text-indigo-50 bg-indigo-400',
+        'success' => 'text-green-50 bg-green-400',
+        'caution' => 'text-yellow-50 bg-yellow-400',
+        'warning' => 'text-red-50 bg-red-400',
+    ];
+
     /**
      * Create the component instance.
      *
@@ -27,9 +39,9 @@ class Alert extends Component
      * @param  string  $message
      * @return void
      */
-    public function __construct($type = 'primary', $message = null)
+    public function __construct($type = 'default', $message = null)
     {
-        $this->type = $type;
+        $this->type = $this->types[$type] ?? $this->types['default'];
         $this->message = $message;
     }
 

app/admin.php

@@ -32,5 +32,5 @@ add_action('customize_register', function (WP_Customize_Manager $wp_customize) {
  * @return void
  */
 add_action('customize_preview_init', function () {
-    wp_enqueue_script('sage/customizer.js', asset('scripts/customizer.js')->uri(), ['customize-preview'], null, true);
+    wp_enqueue_script('sage/customizer.js', asset('js/customizer.js')->uri(), ['customize-preview'], null, true);
 });

app/filters.php

@@ -12,5 +12,5 @@ namespace App;
  * @return string
  */
 add_filter('excerpt_more', function () {
-    return ' &hellip; <a href="' . get_permalink() . '">' . __('Continued', 'sage') . '</a>';
+    return sprintf(' &hellip; <a href="%s">%s</a>', get_permalink(), __('Continued', 'sage'));
 });

app/setup.php

@@ -14,16 +14,16 @@ use function Roots\asset;
  * @return void
  */
 add_action('wp_enqueue_scripts', function () {
-    wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
+    wp_enqueue_script('sage/vendor.js', asset('js/vendor.js')->uri(), ['jquery'], null, true);
-    wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['sage/vendor.js', 'jquery'], null, true);
+    wp_enqueue_script('sage/app.js', asset('js/app.js')->uri(), ['sage/vendor.js'], null, true);
 
-    wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
+    wp_add_inline_script('sage/vendor.js', asset('js/manifest.js')->contents(), 'before');
 
     if (is_single() && comments_open() && get_option('thread_comments')) {
         wp_enqueue_script('comment-reply');
     }
 
-    wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
+    wp_enqueue_style('sage/app.css', asset('css/app.css')->uri(), false, null);
 }, 100);
 
 /**
@@ -32,14 +32,14 @@ add_action('wp_enqueue_scripts', function () {
  * @return void
  */
 add_action('enqueue_block_editor_assets', function () {
-    if ($manifest = asset('scripts/manifest.asset.php')->get()) {
+    if ($manifest = asset('js/manifest.asset.php')->get()) {
-        wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), $manifest['dependencies'], null, true);
+        wp_enqueue_script('sage/vendor.js', asset('js/vendor.js')->uri(), ...array_values($manifest));
-        wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), ['sage/vendor.js'], null, true);
+        wp_enqueue_script('sage/editor.js', asset('js/editor.js')->uri(), ['sage/vendor.js'], null, true);
 
-        wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
+        wp_add_inline_script('sage/vendor.js', asset('js/manifest.js')->contents(), 'before');
     }
 
-    wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);
+    wp_enqueue_style('sage/editor.css', asset('css/editor.css')->uri(), false, null);
 }, 100);
 
 /**
@@ -117,8 +117,8 @@ add_action('after_setup_theme', function () {
      */
     add_theme_support('editor-color-palette', [
         [
-            'name' => __('Primary', 'sage'),
+            'name' => __('Brand', 'sage'),
-            'slug' => 'primary',
+            'slug' => 'brand',
             'color' => '#525ddc',
         ]
     ]);

bootstrap/app.php

@@ -0,0 +1,62 @@
+<?php
+
+/*
+|--------------------------------------------------------------------------
+| Create The Application
+|--------------------------------------------------------------------------
+|
+| The first thing we will do is create a new Acorn application instance
+| which serves as the "glue" for all the components of Laravel, and is
+| the IoC container for the system binding all of the various parts.
+|
+*/
+
+$app = new Roots\Acorn\Bootloader();
+
+/*
+|--------------------------------------------------------------------------
+| Register Sage Theme Files
+|--------------------------------------------------------------------------
+|
+| Out of the box, Sage ships with categorically named theme files
+| containing common functionality and setup to be bootstrapped with your
+| theme. Simply add (or remove) files from the array below to change what
+| is registered alongside Sage.
+|
+*/
+
+collect(['helpers', 'setup', 'filters', 'admin'])
+    ->each(function ($file) {
+        if (! locate_template($file = "app/{$file}.php", true, true)) {
+            wp_die(
+                sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
+            );
+        }
+    });
+
+/*
+|--------------------------------------------------------------------------
+| Enable Sage Theme Support
+|--------------------------------------------------------------------------
+|
+| Once our theme files are registered and available for use, we are almost
+| ready to boot our application. But first, we need to signal to Acorn
+| that we will need to initialize the necessary service providers built in
+| for Sage when booting.
+|
+*/
+
+add_theme_support('sage');
+
+/*
+|--------------------------------------------------------------------------
+| Return The Application
+|--------------------------------------------------------------------------
+|
+| This script returns the application instance. The instance is given to
+| the calling script so we can separate the building of the instances
+| from the actual running of the application and sending responses.
+|
+*/
+
+return $app;

bootstrap/cache/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

composer.json

@@ -39,11 +39,11 @@
     }
   },
   "require": {
-    "php": "^7.2.5",
+    "php": "^7.3|^8.0",
-    "roots/acorn": "^1.1"
+    "roots/acorn": "dev-laravel-85"
   },
   "require-dev": {
-    "filp/whoops": "^2.7",
+    "filp/whoops": "^2.9",
     "squizlabs/php_codesniffer": "^3.5"
   },
   "suggest": {
@@ -59,7 +59,7 @@
   "prefer-stable": true,
   "scripts": {
     "lint": [
-      "phpcs --ignore=index.php,vendor,resources,storage,dist --extensions=php --standard=PSR12 ."
+      "phpcs --ignore=index.php,bootstrap,public,resources,storage,vendor,node_modules --extensions=php --standard=PSR12 ."
     ],
     "post-autoload-dump": [
       "Roots\\Acorn\\ComposerScripts::postAutoloadDump"

config/app.php

@@ -24,7 +24,7 @@ return [
     |
     | This value determines the "environment" your application is currently
     | running in. This may determine how you prefer to configure various
-    | services your application utilizes. Set this in your ".env" file.
+    | services the application utilizes. Set this in your ".env" file.
     |
     */
 
@@ -56,19 +56,6 @@ return [
 
     'timezone' => get_option('timezone_string', 'UTC'),
 
-    /*
-    |--------------------------------------------------------------------------
-    | Preflight Checks
-    |--------------------------------------------------------------------------
-    |
-    | This value allows service providers to execute preflight tasks after
-    | booting. These tasks include creating directories, databases, and files,
-    | or doing any other checks to ensure the service is functional.
-    |
-    */
-
-    'preflight' => env('WP_ENV', 'production') !== 'production',
-
     /*
     |--------------------------------------------------------------------------
     | Global Helpers
@@ -108,6 +95,21 @@ return [
 
     'fallback_locale' => 'en',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is used by the Illuminate encrypter service and should be set
+    | to a random, 32 character string, otherwise these encrypted strings
+    | will not be safe. Please do this before deploying an application!
+    |
+    */
+
+    'key' => env('APP_KEY'),
+
+    'cipher' => 'AES-256-CBC',
+
     /*
     |--------------------------------------------------------------------------
     | Autoloaded Service Providers
@@ -120,15 +122,42 @@ return [
     */
 
     'providers' => [
-        /**
-         * Package Service Providers
-         */
-        // ExamplePackage\Providers\ExamplePackageServiceProvider::class,
 
-        /**
+        /*
-         * Application Service Providers
+         * Laravel Framework Service Providers...
+         */
+        // Illuminate\Auth\AuthServiceProvider::class,
+        // Illuminate\Broadcasting\BroadcastServiceProvider::class,
+        Illuminate\Bus\BusServiceProvider::class,
+        Illuminate\Cache\CacheServiceProvider::class,
+        // Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
+        // Illuminate\Cookie\CookieServiceProvider::class,
+        // Illuminate\Database\DatabaseServiceProvider::class,
+        // Illuminate\Encryption\EncryptionServiceProvider::class,
+        Illuminate\Filesystem\FilesystemServiceProvider::class,
+        // Illuminate\Foundation\Providers\FoundationServiceProvider::class,
+        // Illuminate\Hashing\HashServiceProvider::class,
+        // Illuminate\Mail\MailServiceProvider::class,
+        // Illuminate\Notifications\NotificationServiceProvider::class,
+        // Illuminate\Pagination\PaginationServiceProvider::class,
+        // Illuminate\Pipeline\PipelineServiceProvider::class,
+        // Illuminate\Queue\QueueServiceProvider::class,
+        // Illuminate\Redis\RedisServiceProvider::class,
+        // Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
+        // Illuminate\Session\SessionServiceProvider::class,
+        // Illuminate\Translation\TranslationServiceProvider::class,
+        // Illuminate\Validation\ValidationServiceProvider::class,
+        Illuminate\View\ViewServiceProvider::class,
+
+        /*
+         * Package Service Providers...
+         */
+
+        /*
+         * Application Service Providers...
          */
         App\Providers\ThemeServiceProvider::class,
+
     ],
 
     /*
@@ -143,41 +172,44 @@ return [
     */
 
     'aliases' => [
+
         'App' => Illuminate\Support\Facades\App::class,
         'Arr' => Illuminate\Support\Arr::class,
-        'Artisan' => Illuminate\Support\Facades\Artisan::class,
+        // 'Artisan' => Illuminate\Support\Facades\Artisan::class,
-        'Auth' => Illuminate\Support\Facades\Auth::class,
+        // 'Auth' => Illuminate\Support\Facades\Auth::class,
         'Blade' => Illuminate\Support\Facades\Blade::class,
-        'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
+        // 'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
         'Bus' => Illuminate\Support\Facades\Bus::class,
         'Cache' => Illuminate\Support\Facades\Cache::class,
         'Config' => Illuminate\Support\Facades\Config::class,
-        'Cookie' => Illuminate\Support\Facades\Cookie::class,
+        // 'Cookie' => Illuminate\Support\Facades\Cookie::class,
-        'Crypt' => Illuminate\Support\Facades\Crypt::class,
+        // 'Crypt' => Illuminate\Support\Facades\Crypt::class,
-        'DB' => Illuminate\Support\Facades\DB::class,
+        // 'DB' => Illuminate\Support\Facades\DB::class,
-        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
+        // 'Eloquent' => Illuminate\Database\Eloquent\Model::class,
         'Event' => Illuminate\Support\Facades\Event::class,
         'File' => Illuminate\Support\Facades\File::class,
-        'Gate' => Illuminate\Support\Facades\Gate::class,
+        // 'Gate' => Illuminate\Support\Facades\Gate::class,
-        'Hash' => Illuminate\Support\Facades\Hash::class,
+        // 'Hash' => Illuminate\Support\Facades\Hash::class,
-        'Http' => Illuminate\Support\Facades\Http::class,
+        // 'Http' => Illuminate\Support\Facades\Http::class,
-        'Lang' => Illuminate\Support\Facades\Lang::class,
+        // 'Lang' => Illuminate\Support\Facades\Lang::class,
         'Log' => Illuminate\Support\Facades\Log::class,
-        'Mail' => Illuminate\Support\Facades\Mail::class,
+        // 'Mail' => Illuminate\Support\Facades\Mail::class,
-        'Notification' => Illuminate\Support\Facades\Notification::class,
+        // 'Notification' => Illuminate\Support\Facades\Notification::class,
-        'Password' => Illuminate\Support\Facades\Password::class,
+        // 'Password' => Illuminate\Support\Facades\Password::class,
-        'Queue' => Illuminate\Support\Facades\Queue::class,
+        // 'Queue' => Illuminate\Support\Facades\Queue::class,
-        'Redirect' => Illuminate\Support\Facades\Redirect::class,
+        // 'Redirect' => Illuminate\Support\Facades\Redirect::class,
-        'Redis' => Illuminate\Support\Facades\Redis::class,
+        // 'Redis' => Illuminate\Support\Facades\Redis::class,
-        'Request' => Illuminate\Support\Facades\Request::class,
+        // 'Request' => Illuminate\Support\Facades\Request::class,
-        'Response' => Illuminate\Support\Facades\Response::class,
+        // 'Response' => Illuminate\Support\Facades\Response::class,
-        'Route' => Illuminate\Support\Facades\Route::class,
+        // 'Route' => Illuminate\Support\Facades\Route::class,
-        'Schema' => Illuminate\Support\Facades\Schema::class,
+        // 'Schema' => Illuminate\Support\Facades\Schema::class,
-        'Session' => Illuminate\Support\Facades\Session::class,
+        // 'Session' => Illuminate\Support\Facades\Session::class,
         'Storage' => Illuminate\Support\Facades\Storage::class,
         'Str' => Illuminate\Support\Str::class,
-        'URL' => Illuminate\Support\Facades\URL::class,
+        // 'URL' => Illuminate\Support\Facades\URL::class,
-        'Validator' => Illuminate\Support\Facades\Validator::class,
+        // 'Validator' => Illuminate\Support\Facades\Validator::class,
         'View' => Illuminate\Support\Facades\View::class,
+
     ],
+
 ];

config/assets.php

@@ -34,9 +34,9 @@ return [
     'manifests' => [
         'theme' => [
             'strategy' => 'relative',
-            'path' => get_theme_file_path('/dist'),
+            'path' => get_theme_file_path('/public'),
-            'uri' => get_theme_file_uri('/dist'),
+            'uri' => get_theme_file_uri('/public'),
-            'manifest' => get_theme_file_path('/dist/mix-manifest.json'),
+            'manifest' => get_theme_file_path('/public/mix-manifest.json'),
         ]
     ]
 ];

config/filesystems.php

@@ -17,19 +17,6 @@ return [
 
     'default' => env('FILESYSTEM_DRIVER', 'local'),
 
-    /*
-    |--------------------------------------------------------------------------
-    | Default Cloud Filesystem Disk
-    |--------------------------------------------------------------------------
-    |
-    | Many applications store files both locally and in the cloud. For this
-    | reason, you may specify a default "cloud" driver here. This driver
-    | will be bound as the Cloud disk implementation in the container.
-    |
-    */
-
-    'cloud' => env('FILESYSTEM_CLOUD', 's3'),
-
     /*
     |--------------------------------------------------------------------------
     | Filesystem Disks
@@ -44,11 +31,10 @@ return [
     */
 
     'disks' => [
+
         'local' => [
             'driver' => 'local',
             'root' => WP_CONTENT_DIR,
-            'url' => content_url(),
-            'visibility' => 'public',
         ],
 
         'wordpress' => [
@@ -58,7 +44,7 @@ return [
             'visibility' => 'public',
         ],
 
-        'sage' => [
+        'theme' => [
             'driver' => 'local',
             'root' => get_theme_file_path(),
             'url' => get_theme_file_uri(),
@@ -72,6 +58,9 @@ return [
             'region' => env('AWS_DEFAULT_REGION'),
             'bucket' => env('AWS_BUCKET'),
             'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
         ],
+
     ],
+
 ];

config/logging.php

@@ -46,28 +46,28 @@ return [
 
         'single' => [
             'driver' => 'single',
-            'path' => storage_path('logs/sage.log'),
+            'path' => storage_path('logs/acorn.log'),
-            'level' => 'debug',
+            'level' => env('LOG_LEVEL', 'debug'),
         ],
 
         'daily' => [
             'driver' => 'daily',
-            'path' => storage_path('logs/sage.log'),
+            'path' => storage_path('logs/acorn.log'),
-            'level' => 'debug',
+            'level' => env('LOG_LEVEL', 'debug'),
             'days' => 14,
         ],
 
         'slack' => [
             'driver' => 'slack',
             'url' => env('LOG_SLACK_WEBHOOK_URL'),
-            'username' => 'App Log',
+            'username' => 'Acorn Log',
             'emoji' => ':boom:',
-            'level' => 'critical',
+            'level' => env('LOG_LEVEL', 'critical'),
         ],
 
         'papertrail' => [
             'driver' => 'monolog',
-            'level' => 'debug',
+            'level' => env('LOG_LEVEL', 'debug'),
             'handler' => SyslogUdpHandler::class,
             'handler_with' => [
                 'host' => env('PAPERTRAIL_URL'),
@@ -86,12 +86,12 @@ return [
 
         'syslog' => [
             'driver' => 'syslog',
-            'level' => 'debug',
+            'level' => env('LOG_LEVEL', 'debug'),
         ],
 
         'errorlog' => [
             'driver' => 'errorlog',
-            'level' => 'debug',
+            'level' => env('LOG_LEVEL', 'debug'),
         ],
 
         'null' => [
@@ -100,7 +100,8 @@ return [
         ],
 
         'emergency' => [
-            'path' => storage_path('logs/sage.log'),
+            'path' => storage_path('logs/acorn.log'),
         ],
     ],
+
 ];

functions.php

@@ -19,50 +19,13 @@ require $composer;
 
 /*
 |--------------------------------------------------------------------------
-| Register Sage Theme Files
+| Run The Theme
 |--------------------------------------------------------------------------
 |
-| Out of the box, Sage ships with categorically named theme files
+| Once we have the theme booted, we can handle the incoming request using
-| containing common functionality and setup to be bootstrapped with your
+| the application's HTTP kernel. Then, we will send the response back
-| theme. Simply add (or remove) files from the array below to change what
+| to this client's browser, allowing them to enjoy our application.
-| is registered alongside Sage.
 |
 */
 
-collect(['helpers', 'setup', 'filters', 'admin'])
+require_once __DIR__ . '/bootstrap/app.php';
-    ->each(function ($file) {
-        $file = "app/{$file}.php";
-
-        if (! locate_template($file, true, true)) {
-            wp_die(
-                sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
-            );
-        }
-    });
-
-/*
-|--------------------------------------------------------------------------
-| Enable Sage Theme Support
-|--------------------------------------------------------------------------
-|
-| Once our theme files are registered and available for use, we are almost
-| ready to boot our application. But first, we need to signal to Acorn
-| that we will need to initialize the necessary service providers built in
-| for Sage when booting.
-|
-*/
-
-add_theme_support('sage');
-
-/*
-|--------------------------------------------------------------------------
-| Turn On The Lights
-|--------------------------------------------------------------------------
-|
-| We are ready to bootstrap the Acorn framework and get it ready for use.
-| Acorn will provide us support for Blade templating as well as the ability
-| to utilize the Laravel framework and its beautifully written packages.
-|
-*/
-
-new Roots\Acorn\Bootloader();

package.json

@@ -3,54 +3,43 @@
   "browserslist": [
     "extends @wordpress/browserslist-config"
   ],
-  "engines" : {
+  "engines": {
-    "node" : ">=12.0.0"
+    "node": ">=12.14.0"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=development run-s mix",
+    "build": "mix",
-    "build:production": "cross-env NODE_ENV=production run-s clean mix",
+    "build:production": "mix --production",
-    "start": "cross-env NODE_ENV=development run-s \"mix -- --watch\"",
+    "start": "mix watch",
-    "hot": "cross-env NODE_ENV=development run-s build mix:hot",
+    "hot": "mix watch --hot",
-    "mix": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "clean": "wp acorn optimize:clean",
-    "mix:hot": "webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "lint": "npm run lint:js && npm run lint:css",
-    "clean": "run-p clean:*",
+    "lint:js": "eslint resources/js",
-    "clean:dist": "rimraf dist",
+    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
-    "clean:cache": "rimraf storage/framework/cache/*.php storage/framework/cache/data/*.php",
+    "translate": "npm run translate:pot && npm run translate:js",
-    "clean:views": "rimraf storage/framework/views/*.php",
+    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
-    "lint": "run-s -c lint:*",
+    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
-    "lint:scripts": "eslint resources/assets/scripts",
-    "lint:styles": "stylelint \"resources/assets/**/*.{vue,css,sass,scss,less}\"",
-    "test": "run-s -c lint",
-    "translate": "run-s -c translate:*",
-    "translate:pot": "wp i18n make-pot . ./resources/languages/sage.pot --ignore-domain --include=\"app,resources/assets,resources/views\"",
-    "translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.3.1",
     "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
-    "@wordpress/babel-preset-default": "^4.17.0",
+    "@wordpress/babel-preset-default": "^4.20.0",
     "@wordpress/browserslist-config": "^2.7.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^2.9.0",
     "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.12",
+    "browser-sync": "^2.26.13",
-    "browser-sync-webpack-plugin": "^2.0.1",
+    "browser-sync-webpack-plugin": "^2.3.0",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
-    "eslint": "^7.7.0",
+    "eslint": "^7.17.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.22.1",
-    "laravel-mix": "^5.0.4",
+    "laravel-mix": "^6.0.9",
-    "laravel-mix-copy-watched": "^2.2.4",
+    "postcss": "^8.1",
-    "laravel-mix-purgecss": "^5.0.0",
+    "sass": "^1.32.4",
-    "npm-run-all": "^4.1",
+    "sass-loader": "10.1.1",
-    "purgecss-with-wordpress": "^2.3.0",
+    "stylelint": "^13.8.0",
-    "rimraf": "^3.0.2",
-    "sass": "^1.26.10",
-    "sass-loader": "^9.0.3",
-    "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "tailwindcss": "^2.0.2"
   },
   "dependencies": {
-    "bootstrap": "^4.5.3",
+    "jquery": "^3.5.1"
-    "jquery": "^3.5.1",
-    "popper.js": "^1.16.1"
   }
 }

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 }}">
+<div {{ $attributes->merge(['class' => $type]) }}>
-  {!! $message ?? $slot !!}
+  <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="py-8 prose main">
-  <main class="main">
+      @yield('content')
-    @yield('content')
+    </main>
-  </main>
 
-  @hasSection('sidebar')
+    @hasSection('sidebar')
-    <aside class="sidebar">
+      <aside class="sidebar">
-      @yield('sidebar')
+        @yield('sidebar')
-    </aside>
+      </aside>
-  @endif
+    @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'))
-    @php(dynamic_sidebar('sidebar-footer'))
-  </div>
 </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>

style.css

@@ -8,6 +8,6 @@ Author URI:         https://roots.io/
 Text Domain:        sage
 License:            MIT License
 License URI:        https://opensource.org/licenses/MIT
-Requires PHP:       7.2.5
+Requires PHP:       7.3
 Requires at least:  5.4
 */

tailwind.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  purge: {
+    content: [
+      './**/*.php',
+      './resources/**/*.vue',
+      './resources/**/*.js',
+      './resources/**/*.json',
+    ],
+  },
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {},
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

webpack.mix.js

@@ -1,7 +1,5 @@
 const mix = require('laravel-mix');
 require('@tinypixelco/laravel-mix-wp-blocks');
-require('laravel-mix-purgecss');
-require('laravel-mix-copy-watched');
 
 /*
  |--------------------------------------------------------------------------
@@ -15,30 +13,28 @@ require('laravel-mix-copy-watched');
  */
 
 mix
-  .setPublicPath('./dist')
+  .setPublicPath('./public')
   .browserSync('sage.test');
 
 mix
-  .sass('resources/assets/styles/app.scss', 'styles')
+  .sass('resources/css/app.scss', 'css')
-  .sass('resources/assets/styles/editor.scss', 'styles')
+  .sass('resources/css/editor.scss', 'css')
-  .purgeCss({
+  .options({
-    extend: { content: [path.join(__dirname, 'index.php')] },
+    processCssUrls: false,
-    whitelist: require('purgecss-with-wordpress').whitelist,
+    postCss: [require('tailwindcss')('./tailwind.config.js')],
-    whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
   });
 
 mix
-  .js('resources/assets/scripts/app.js', 'scripts')
+  .js('resources/js/app.js', 'js')
-  .js('resources/assets/scripts/customizer.js', 'scripts')
+  .js('resources/js/customizer.js', 'js')
-  .blocks('resources/assets/scripts/editor.js', 'scripts')
+  .blocks('resources/js/editor.js', 'js');
-  .extract();
 
 mix
-  .copyWatched('resources/assets/images/**', 'dist/images')
+  .copyDirectory('resources/images/**', 'public/images')
-  .copyWatched('resources/assets/fonts/**', 'dist/fonts');
+  .copyDirectory('resources/fonts/**', 'public/fonts');
 
 mix
   .autoload({ jquery: ['$', 'window.jQuery'] })
-  .options({ processCssUrls: false })
+  .extract()
-  .sourceMaps(false, 'source-map')
+  .sourceMaps()
   .version();