Update the preset to use laravel-mix-tailwind (#28)

* switch to use laravel-mix-tailwind

* exclude laravel-mix from package.json so we can explicitly define required version

* change main.css to app.css to be consistent with default Laravel install

* update readme

* update command info

* Remove comments for LESS/SASS preprocessing.

The `laravel-mix-tailwind` plugin handles this for us, so there's
nothing exceptional you need to do if you want to use `mix.less()` or
`mix.sass()` any more.

Author: michaeldyrynda

README.md

@@ -1,19 +1,18 @@
-# Laravel 5.5.x/5.6.x Frontend preset for Tailwind CSS
+# Laravel 5.5+ Frontend preset for Tailwind CSS
 
 A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com) - a Utility-First CSS Framework for Rapid UI Development.
 
 *Current version:* **Tailwind CSS 0.5.2**
 
 ## Usage
 
-1. Fresh install Laravel 5.5.x or 5.6.x and cd to your app.
-2. Install this preset via `composer require laravel-frontend-presets/tailwindcss`. Laravel >= 5.5.0 will automatically discover this package. No need to register the service provider.
+1. Fresh install Laravel >= 5.5.0 and cd to your app.
+2. Install this preset via `composer require laravel-frontend-presets/tailwindcss`. Laravel will automatically discover this package. No need to register the service provider.
 3. Use `php artisan preset tailwindcss` for the basic Tailwind CSS preset OR use `php artisan preset 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`
-5. `npm run dev`
-6. Configure your favorite database (mysql, sqlite etc.)
-7. `php artisan migrate` to create basic user tables.
-8. `php artisan serve` (or equivalent) to run server and test preset.
+4. `npm install && npm run dev && npm run dev` (this is required twice, due to the way that `laravel-mix-tailwind` installs the Tailwind CSS dependency)
+5. Configure your favorite database (mysql, sqlite etc.)
+6. `php artisan migrate` to create basic user tables.
+7. `php artisan serve` (or equivalent) to run server and test preset.
 
 ### Changing colours
 

src/TailwindCssPreset.php

@@ -27,11 +27,13 @@ public static function installAuth()
     protected static function updatePackageArray(array $packages)
     {
         return array_merge([
+            'laravel-mix' => '^2.1',
             'laravel-mix-purgecss' => '^2.0',
-            'tailwindcss' => '>=0.5.2',
+            'laravel-mix-tailwind' => '^0.1.0',
         ], Arr::except($packages, [
             'bootstrap',
             'bootstrap-sass',
+            'laravel-mix',
             'jquery',
             'popper.js',
         ]));
@@ -49,7 +51,7 @@ protected static function updateStyles()
             }
         });
 
-        copy(__DIR__.'/tailwindcss-stubs/resources/assets/css/main.css', resource_path('assets/css/main.css'));
+        copy(__DIR__.'/tailwindcss-stubs/resources/assets/css/app.css', resource_path('assets/css/app.css'));
     }
 
     protected static function updateBootstrapping()

src/TailwindCssPresetServiceProvider.php

@@ -13,14 +13,14 @@ public function boot()
             TailwindCssPreset::install();
 
             $command->info('Tailwind CSS scaffolding installed successfully.');
-            $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
+            $command->info('Please run "npm install && npm run dev && npm run dev" to compile your fresh scaffolding.');
         });
 
         PresetCommand::macro('tailwindcss-auth', function ($command) {
             TailwindCssPreset::installAuth();
 
             $command->info('Tailwind CSS scaffolding with auth views installed successfully.');
-            $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
+            $command->info('Please run "npm install && npm run dev && npm run dev" to compile your fresh scaffolding.');
         });
     }
 }

src/tailwindcss-stubs/resources/assets/css/main.css renamed to src/tailwindcss-stubs/resources/assets/css/app.css

@@ -11,7 +11,7 @@
     <title>{{ config('app.name', 'Laravel') }}</title>
 
     <!-- Styles -->
-    <link href="{{ asset('css/main.css') }}" rel="stylesheet">
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 </head>
 <body class="bg-brand-lightest h-screen">
     <div id="app">

src/tailwindcss-stubs/resources/views/layouts/app.blade.php

@@ -11,7 +11,7 @@
     <title>{{ config('app.name', 'Laravel') }}</title>
 
     <!-- Styles -->
-    <link href="{{ asset('css/main.css') }}" rel="stylesheet">
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 </head>
 <body class="bg-brand-lightest font-sans font-normal">
     <div class="flex flex-col">

src/tailwindcss-stubs/resources/views/welcome.blade.php

@@ -1,5 +1,6 @@
 let mix = require("laravel-mix");
-let tailwindcss = require("tailwindcss");
+
+require("laravel-mix-tailwind");
 require("laravel-mix-purgecss");
 
 /*
@@ -13,28 +14,11 @@ require("laravel-mix-purgecss");
  |
  */
 
-mix
-  .js("resources/assets/js/app.js", "public/js")
-  .postCss("resources/assets/css/main.css", "public/css", [
-    tailwindcss("./tailwind.js")
-  ])
-  .purgeCss();
+mix.js("resources/assets/js/app.js", "public/js")
+   .postCss("resources/assets/css/app.css", "public/css")
+   .tailwind()
+   .purgeCss();
 
 if (mix.inProduction()) {
   mix.version();
 }
-
-// If you want to use LESS for your preprocessing
-// mix.less('resources/assets/less/main.less', 'public/css')
-//   .options({
-//     postCss: [
-//       tailwindcss('./tailwind.js'),
-//     ]
-//   })
-
-// If you want to use SASS for preprocessing
-// mix.sass('resources/assets/sass/app.scss', 'public/css')
-//    .options({
-//       processCssUrls: false,
-//       postCss: [ tailwindcss('tailwind.js') ],
-//    });