Merge pull request #48 from rverrips/master

Updated Views for Tailwindcss v1

Author: michaeldyrynda

README.md

@@ -2,21 +2,30 @@
 
 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.6.6**
+*Current version:* **Tailwind CSS 1.0**
 
 ## Usage
 
 1. Fresh install Laravel >= 5.7.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 && npm run dev && npm run dev` (this is required twice, due to the way that `laravel-mix-tailwind` installs the Tailwind CSS dependency)
+
+### For Presets without Authentication
+
+1. Use `php artisan preset 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.
+
+### For Presets with Authentication
+
+1. 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 && npm run dev`
 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.
 
 ### Config
 
-The default `tailwind.js` configuration file included by this package simply uses the config from the Tailwind vendor files. Should you wish to make changes, you should remove the file and run `node_modules/.bin/tailwind init`, which will generate a fresh configuration file for you, which you are free to change to suit your needs.
+The default `tailwind.config.js` configuration file included by this package simply uses the config from the Tailwind vendor files. Should you wish to make changes, you should remove the file and run `node_modules/.bin/tailwind init`, which will generate a fresh configuration file for you, which you are free to change to suit your needs.
 
 ### Screenshots
 
@@ -26,8 +35,6 @@ The default `tailwind.js` configuration file included by this package simply use
 
 ![Login](/screenshots/login.png)
 
-![Send Password Reset](/screenshots/send-password-reset.png)
-
 ![Reset Password](/screenshots/reset-password.png)
 
 ![Dashboard](/screenshots/dashboard.png)

screenshots/dashboard.png

@@ -30,12 +30,13 @@ protected static function updatePackageArray(array $packages)
             'laravel-mix' => '^4.0.14',
             'laravel-mix-purgecss' => '^4.1',
             'laravel-mix-tailwind' => '^0.1.0',
-            'tailwindcss' => '^0.7.4',
+            'tailwindcss' => 'next',
             'vue' => '^2.5.17',
             'vue-template-compiler' => '^2.6.4',
         ], Arr::except($packages, [
             'bootstrap',
             'bootstrap-sass',
+            'popper.js',
             'laravel-mix',
             'jquery',
         ]));
@@ -58,7 +59,7 @@ protected static function updateStyles()
 
     protected static function updateBootstrapping()
     {
-        copy(__DIR__.'/tailwindcss-stubs/tailwind.js', base_path('tailwind.js'));
+        copy(__DIR__.'/tailwindcss-stubs/tailwind.config.js', base_path('tailwind.config.js'));
 
         copy(__DIR__.'/tailwindcss-stubs/webpack.mix.js', base_path('webpack.mix.js'));
 

screenshots/login.png

@@ -3,9 +3,13 @@
  * Normalize.css and some additional base styles.
  *
  * You can see the styles here:
- * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/base";
  */
-@tailwind preflight;
+@tailwind base;
 
 /**
  * This injects any component classes registered by plugins.
@@ -26,7 +30,7 @@
  * .btn { ... }
  * .form-input { ... }
  *
- * Or if using a preprocessor:
+ * Or if using a preprocessor or `postcss-import`:
  *
  * @import "components/buttons";
  * @import "components/forms";